PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    uniapp canvas 生成海报并保存到本地

    作者:admin来源:网络浏览:时间:2021-09-07 10:08:51我要评论
    导读:uniapp canvas 生成海报并保存到本地
    uniapp canvas 生成海报并保存到本地

    1. <template> 
    2.     <view class="canvas-box"
    3.         <!-- 导航栏 --> 
    4.         <view class="nav-box"
    5.             <view class="title-top" :style="'padding-top:' + statusBarHeight + 'rpx'"
    6.                 <u-icon class="title-icon" name="arrow-left" color="#ffffff" size="36" @click="getBack"></u-icon> 
    7.                 <text>海报分享</text> 
    8.             </view> 
    9.         </view> 
    10.          
    11.         <!-- 开发完成之前,取消 fixed;opacity: 0;--> 
    12.         <canvas style="width: 346px;height: 500px;position: fixed;opacity: 0;" class="canvas" canvas-id="canvasID"></canvas> 
    13.         <!-- 完成海报制作后,需要把canvas移到看不见的地方,或者隐藏,把image显示出来 --> 
    14.         <image :src="imgUrl" mode=""></image> 
    15.  
    16.         <view class="footer"
    17.             <view class="download" @click="saveImage"
    18.                 <!-- 小于符号图标 --> 
    19.                 <u-icon name="download" color="#ffffff" size="34"></u-icon> 
    20.                 <text>保存到相册</text> 
    21.             </view> 
    22.         </view> 
    23.     </view> 
    24. </template> 
    25.  
    26. <script> 
    27.     export default { 
    28.         data() { 
    29.             return { 
    30.                 imgUrl: ''
    31.                 statusBarHeight: 0, 
    32.                 avatar: '../../../../static/images/default-chat-avatar.png'//头像地址 
    33.                 hello: '../../../../static/images/share/weixin-hi.png'// hello图标 
    34.                 mony: '../../../../static/images/share/mony.png' //圆的钱图标 
    35.             } 
    36.         }, 
    37.         created() { 
    38.             this.$tool.getSystemInfo().then(res => { 
    39.                 this.statusBarHeight = res 
    40.             }) 
    41.         }, 
    42.         mounted() { 
    43.             let ctx = uni.createCanvasContext('canvasID'this); 
    44.             // ctx.setFillStyle("transparent"); //设置canvas背景颜色 
    45.             // ctx.fillRect(0, 0, 346, 500) //设置canvas画布大小 
    46.             this.fillRoundRect(ctx, 0, 0, 346, 500, 15); //绘制一个圆角矩形 
    47.             this.fillRoundRect(ctx, 0, 0, 346, 182, 15, '#333231'); //绘制一个圆角矩形 
    48.             this.drawCircular(ctx, this.avatar, 36, 32, 50, 50) //绘制圆形头像 
    49.  
    50.             ctx.setFontSize(18) 
    51.             ctx.setFillStyle("#ffffff"
    52.             ctx.fillText('明天依然是晴天', 98, 65) 
    53.             ctx.drawImage(this.hello, 240, 10, 86, 86) //二维码 
    54.             ctx.font = '20px normal' 
    55.             ctx.setFillStyle("#09CFB1"
    56.             ctx.fillText('我为“贤马”带盐', 30, 122) 
    57.             ctx.font = '16px normal' 
    58.             ctx.setFillStyle("#ffffff"
    59.             ctx.fillText('“闲么?上贤马做兼职”', 20, 152) 
    60.  
    61.             // 绘制职位标题,多余文字自动换行 
    62.             ctx.setFontSize(28) 
    63.             ctx.setFillStyle("#333333"
    64.  
    65.             let str = '店铺实习生ZAra重庆龙湖时代' 
    66.             // 字符串总长度 
    67.             let _strLength = str.length 
    68.             // 总结截取次数 
    69.             let _strNum = Math.ceil(_strLength / 9) 
    70.  
    71.             // 每次开始截取字符串的索引 
    72.             let _strHeight = 0 
    73.             // 绘制的字体 x,y的初始位置 
    74.             let _strX = 27, 
    75.                 _strY = 223 
    76.             let strIndex = 223 
    77.             // 开始截取 
    78.             for (let i = 0; i < _strNum; i++) { 
    79.                 strIndex = _strY + i * 40 
    80.                 ctx.fillText(str.substr(_strHeight + i * 9, 9), _strX, _strY + i * 40) 
    81.             } 
    82.             strIndex += 30 
    83.             ctx.setFontSize(14) 
    84.             ctx.setFillStyle("#1BB99A"
    85.             let strtitle = '环境好/结算快/时间短' 
    86.             ctx.fillText(strtitle, _strX, strIndex) 
    87.  
    88.             ctx.setFontSize(20) 
    89.             ctx.setFillStyle("#333231"
    90.             ctx.fillText('16元/小时', _strX, 418) 
    91.  
    92.             this.drawCircular(ctx, this.mony, _strX, 429, 14, 14) //绘制圆形头像 
    93.             ctx.setFontSize(12) 
    94.             ctx.setFillStyle("#F7BA65"
    95.             ctx.fillText('已预付', _strX + 20, 440) 
    96.  
    97.             // 绘制微信二维码 
    98.             ctx.drawImage(this.hello, 208, 370, 120, 120) //二维码 
    99.  
    100.             ctx.draw(false, () => { 
    101.                 // 返回canvas图片信息 
    102.                 uni.canvasToTempFilePath({ 
    103.                     canvasId: 'canvasID'
    104.                     success: (res) => { 
    105.                         this.imgUrl = res.tempFilePath 
    106.                         // console.log(res.tempFilePath) 
    107.                     }, 
    108.                     fail: function(err) { 
    109.                         console.log(err) 
    110.                     } 
    111.                 }) 
    112.             }) 
    113.         }, 
    114.         methods: { 
    115.             getBack() { 
    116.                 uni.navigateBack({ 
    117.                     delta: 1 
    118.                 }); 
    119.             }, 
    120.             saveImage() { //点击保存 
    121.                 var _this = this
    122.                 uni.saveImageToPhotosAlbum({ 
    123.                     filePath: _this.imgUrl, 
    124.                     success() { 
    125.                         uni.showModal({ 
    126.                             title: "保存成功"
    127.                             content: "图片已成功保存到相册,快去分享到您的圈子吧"
    128.                             showCancel: false 
    129.                         }) 
    130.                     } 
    131.                 }) 
    132.             }, 
    133.             // 将网络图片转为临时图片地址 
    134.             async getImageInfo({imgSrc}) { 
    135.                 return new Promise((resolve, errs) => { 
    136.                     uni.downloadFile({ 
    137.                         src: imgSrc, 
    138.                         success: function(image) { 
    139.                             resolve(image); 
    140.                         }, 
    141.                         fail(err) { 
    142.                             errs(err); 
    143.                         } 
    144.                     }); 
    145.                 }); 
    146.             }, 
    147.             // 绘制圆形头像 
    148.             drawCircular(ctx, url, x, y, width, height) { 
    149.                 //画圆形头像 
    150.                 var avatarurl_width = width; 
    151.                 var avatarurl_heigth = height; 
    152.                 var avatarurl_x = x; 
    153.                 var avatarurl_y = y; 
    154.                 ctx.save(); //先保存状态,已便于画完园再用 
    155.                 ctx.beginPath(); //开始绘制 
    156.                 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math 
    157.                     .PI * 2, false); 
    158.                 ctx.setFillStyle("#FFFFFF"
    159.                 ctx.fill() //保证图片无bug填充 
    160.                 ctx.clip(); //剪切 
    161.                 ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片 
    162.                 ctx.restore(); 
    163.             }, 
    164.             // 绘制带圆角的矩形方法 
    165.             fillRoundRect(cxt, x, y, width, height, radius,  fillColor) { 
    166.                 //圆的直径必然要小于矩形的宽高 
    167.                 if (2 * radius > width || 2 * radius > height) { 
    168.                     return false
    169.                 } 
    170.  
    171.                 cxt.save(); 
    172.                 cxt.translate(x, y); 
    173.                 //绘制圆角矩形的各个边 
    174.                 this.drawRoundRectPath(cxt, width, height, radius); 
    175.                 cxt.fillStyle = fillColor || '#fff'//若是给定了值就用给定的值否则给予默认值 
    176.                 cxt.fill(); 
    177.                 cxt.restore(); 
    178.             }, 
    179.             drawRoundRectPath(cxt, width, height, radius) { 
    180.                 cxt.beginPath(0); 
    181.                 //从右下角顺时针绘制,弧度从0到1/2PI 
    182.                 cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); 
    183.  
    184.                 //矩形下边线 
    185.                 cxt.lineTo(radius, height); 
    186.  
    187.                 //左下角圆弧,弧度从1/2PI到PI 
    188.                 cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); 
    189.  
    190.                 //矩形左边线 
    191.                 cxt.lineTo(0, radius); 
    192.  
    193.                 //左上角圆弧,弧度从PI到3/2PI 
    194.                 cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2); 
    195.  
    196.                 //上边线 
    197.                 cxt.lineTo(width - radius, 0); 
    198.  
    199.                 //右上角圆弧 
    200.                 cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2); 
    201.  
    202.                 //右边线 
    203.                 cxt.lineTo(width, height - radius); 
    204.                 cxt.closePath(); 
    205.             } 
    206.         } 
    207.     } 
    208. </script> 
    209.  
    210. <style lang="scss" scoped> 
    211.     .canvas-box { 
    212.         height: 100vh; 
    213.         display: flex; 
    214.         align-items: center; 
    215.         justify-content: center; 
    216.         background-color: #1ABC9C; 
    217.  
    218.         /deep/.nav-box { 
    219.             width: 100%; 
    220.             padding: 0 20rpx; 
    221.             position: absolute; 
    222.             z-index: 9999; 
    223.             top: 0; 
    224.             left: 0; 
    225.  
    226.             .title-top { 
    227.                 font-size: 36rpx; 
    228.                 font-weight: 550; 
    229.                 color: #FFFFFF; 
    230.                 display: flex; 
    231.                 justify-content: center; 
    232.                 align-items: center; 
    233.                 position: relative; 
    234.                 margin-bottom: 30rpx; 
    235.  
    236.                 .title-icon { 
    237.                     position: absolute; 
    238.                     left: 0; 
    239.                 } 
    240.             } 
    241.         } 
    242.  
    243.         image { 
    244.             width: 335px; 
    245.             height: 500px; 
    246.         } 
    247.  
    248.         .footer { 
    249.             display: flex; 
    250.             align-items: center; 
    251.             justify-content: space-between; 
    252.             position: absolute; 
    253.             justify-content: center; 
    254.             padding: 0 40rpx; 
    255.             width: 100%; 
    256.             left: 0; 
    257.             bottom: 10%; 
    258.  
    259.             .download { 
    260.                 border: 1rpx solid #ffffff; 
    261.                 color: #ffffff; 
    262.                 display: flex; 
    263.                 align-items: center; 
    264.             } 
    265.  
    266.             view { 
    267.                 padding: 0 20rpx; 
    268.                 height: 78rpx; 
    269.                 text-align: center; 
    270.                 line-height: 78rpx; 
    271.                 font-size: 30rpx; 
    272.                 border-radius: 36rpx; 
    273.             } 
    274.         } 
    275.     } 
    276. </style> 

     

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-6614-1.html