• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序canvas的使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

现在开发小程序都会有保存图片到本地,这个保存的图片我们可以用canvas画布来画出这么图片

 

 

 

我们首先在wxml中触发点击事件

          <view bindtap="canvas">
            <text>保存到本地</text>
          </view>
    
<view class="model" hidden="{{canvasHide}}" bindtap="clickhid">
      <canvas canvas-id="Canvas" class="canvas"></canvas>
      <view class="btnsave" catchtap="save">保存到相册</view>
    </view>

  

  wxss中注入样式

.model {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99;
  background: rgba(0, 0, 0, 0.7);
  left: 0;
  top: 0;
}

.canvas{
  width: 240px;
  height: 255px;
  position: fixed;
  left: 0;
  right: 0;
  top: 30%;
  z-index: 999;
  margin: 0 auto;
  background: #fff;
}
.btnsave{
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #FE2B54;
  color: #fff;
  text-align: center;
  position: fixed;
  z-index: 99;
  left: 0;
  bottom: 0;
}

  js中写入逻辑代码,如下:

 data:{ 
canvasHide:true, //控制画布是否显示
canvasImg:"",
canvasWidth: 140
})
//画布生成图片 canvas() {
this.setData({
canvasHide:false,
}) wx.showToast({ title: \'分享图片生成中...\', icon: \'loading\', duration: 1000 }); var item = { headImg:"https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1586336426&t=06ceca9a464a8b57ba350c632f4a9dfd", cover:"http://img5.imgtn.bdimg.com/it/u=3720661285,1522818110&fm=26&gp=0.jpg", nickName:"微笑时很美n", title:"111111111" }; let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: item.cover, success: function(res1) { resolve(res1); } }) }); let promise2 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: item.headImg, success: function(res1) { resolve(res1); } }) }); let promise3 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: \'http://img4.imgtn.bdimg.com/it/u=1707295955,795233957&fm=26&gp=0.jpg\', success: function(res1) { resolve(res1); } }) }); Promise.all([ promise1, promise2, promise3 ]).then(res1 => { const ctx = wx.createCanvasContext(\'Canvas\', this) //主要就是计算好各个图文的位置 ctx.setFillStyle(\'white\'); ctx.fillRect(0, 0, 600, 880); // ctx.drawImage(res1[0].path, 0, 0, 240, 135) that.drawImage(ctx, res1[0].path, res1[0].width, res1[0].height); var avatarurl_width = 23.5; //绘制的头像宽度 var avatarurl_heigth = 23.5; //绘制的头像高度 var avatarurl_x = 17; //绘制的头像在画布上的位置 var avatarurl_y = 145; //绘制的头像在画布上的位置 ctx.save(); ctx.beginPath(); //开始绘制 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); ctx.drawImage(res1[1].path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片,必须是https图片 ctx.restore(); ctx.drawImage(res1[2].path, 166, 180, 68, 68) ctx.setFontSize(15) ctx.setFillStyle(\'#000000\') ctx.fillText(item.nickName, 50, 163) ctx.setFontSize(12) ctx.setFillStyle(\'#888888\') that.drawText(ctx, (item.title || \'\'), 193, 10, 110); ctx.setFontSize(9) ctx.setFillStyle(\'#888888\') ctx.fillText(\'长按识别二维码,查看新鲜事儿~\', 10, 245) ctx.stroke() //绘制图片 ctx.draw(false, setTimeout(() => { wx.canvasToTempFilePath({ x: 0, y: 0, width: 310, height: 355, destWidth: 310 * 2, destHeight: 355 * 2, canvasId: \'Canvas\', fileType: \'png\', quality: 1, success: function(res) { that.setData({ canvasImg: res.tempFilePath, }) wx.hideToast() }, fail: function(res) { } }, this) }, 200)); }) }, // 描绘图片 drawImage(ctx, imgPath, imgWidth, imgHeight) { let cWidth = this.data.canvasWidth; let cHeight = this.data.canvasWidth; let dWidth = cWidth / imgWidth; let dHeight = cHeight / imgHeight; if (imgWidth > cWidth && imgHeight > cHeight || imgWidth < cWidth && imgHeight < cHeight) { if (dWidth > dHeight) { ctx.drawImage(imgPath, 0, (imgHeight - cHeight / dWidth) / 2, imgWidth, cHeight / dWidth, cWidth / 3 + 5, 0, cWidth, cHeight) } else { ctx.drawImage(imgPath, (imgWidth - cWidth / dHeight) / 2, 0, cWidth / dHeight, imgHeight, cWidth / 3 + 5, 0, cWidth, cHeight) } } else { if (imgWidth < cWidth) { ctx.drawImage(imgPath, 0, (imgHeight - cHeight / dWidth) / 2, imgWidth, cHeight / dWidth, cWidth / 3 + 5, 0, cWidth, cHeight) } else { ctx.drawImage(imgPath, (imgWidth - cWidth / dHeight) / 2, 0, cWidth / dHeight, imgHeight, cWidth / 3 + 5, 0, cWidth, cHeight) } } }, //绘制多行文字 drawText: function(ctx, str, initHeight, titleHeight, canvasWidth) { var lineWidth = 0; var lastSubStrIndex = 0; //每次开始截取的字符串的索引 for (let i = 0; i < str.length; i++) { lineWidth += ctx.measureText(str[i]).width; if (lineWidth > canvasWidth) { ctx.setFontSize(14) ctx.setFillStyle(\'#888888\') ctx.fillText(str.substring(lastSubStrIndex, i), 20, initHeight); //绘制截取部分 initHeight += 20; //20为字体的高度 lineWidth = 0; lastSubStrIndex = i; titleHeight += 30; } if (i == str.length - 1) { //绘制剩余部分 ctx.fillText(str.substring(lastSubStrIndex, i + 1), 20, initHeight); } } // 标题border-bottom 线距顶部距离 titleHeight = titleHeight + 10; return titleHeight },

  保存到相册

  save: function() {
    var that = this
    //生产环境时 记得这里要加入获取相册授权的代码
    wx.saveImageToPhotosAlbum({

      filePath: that.data.canvasImg,
      success(res) {
        wx.showModal({
          content: \'图片已保存到相册,赶紧晒一下吧~\',
          showCancel: false,
          confirmText: \'好\',
          confirmColor: \'#000000\',
          success: function(res) {
            if (res.confirm) {
              that.setData({
                canvasHide: false
              })
            }
          }
        })
      }
    })
  },

  


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
2小程序canvas使用,及一些坑,以及自己的一些小总结发布时间:2022-07-18
下一篇:
总结:小程序canvas遇到的坑 - WALL*E发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap