小程序canvas分享功能 - 画布部分

前言

小程序使用canvas总结一些遇见的问题,实现以下三个功能
1、绘制详细过程
2、保存到相册
3、预览图片后长按分享好友并保存到相册

初始canvas

小程序对canvas的介绍，附上官网链接
小程序canvas

image.png

HTML部分

可动态设置画布高度、宽度

<div class="canvasBox">
            <canvas canvas-id="myCanvas"  style="width: 1000rpx; height: {{canvasHeight}}rpx;"></canvas>
</div>
<div>
       <!-- <div class="inviteNewcomer" bindtap="saveImg">保存图片</div> -->
       <div class="inviteNewcomer" bindtap="previewImg">预览图片分享好友</div>
</div>

自适应手机宽度

wx.getSystemInfo中用this获取不到data中的值
在绘制方法中将参数乘以相对单位即可实现自适应：

var that = this;
let rpx= 0;
wx.getSystemInfo({
     success(res) {
         rpx = res.windowWidth/375;
         that.canvasWidth = res.windowWidth
      },
})

画背景颜色

var ctx = wx.createCanvasContext('myCanvas');
ctx.fillStyle='#f0f0f0';
ctx.fillRect(0, 0, 1000 * rpx, that.canvasHeight * rpx);

把网图下载为本地图片才能在canvas中画图

如果绘制中的图片过多，这个过程比较费时间，可放在全局异步下载

wx.getImageInfo({
        //网图网址
     src: canvasbackImg,
     success(res){
           that.canvasImgGroup1 = res.path
      }
})

绘制图片

ctx.drawImage(canvasImgGroup1, 35 * rpx, 100 * rpx, 300 * rpx, 300 * rpx)
//ctx.drawImage(图片, x, y, w, h)

绘制文字

ctx.setFillStyle('red')
ctx.setFontSize(24 * rpx)
ctx.fillText('要绘制的文字内容', 260 * rpx, 445 * rpx)

绘制直线

moveTo设置的点到lineTo设置的点

ctx.moveTo(235 * rpx, 430 * rpx);
ctx.lineTo(235 * rpx, 460 * rpx);
ctx.lineWidth = 1 * rpx;
ctx.strokeStyle = '#eeeeee';
ctx.stroke();

将生成好的图片保存到本地，需要延迟一会，绘制期间耗时

setTimeout(function() {
  wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
     success: function(res) {
         that.loadImagePath = res.tempFilePath
      },
      fail: function(res) {
           console.log(res);
        }
  });
}, 500);

点击保存到相册

saveImg: function() {
   wx.saveImageToPhotosAlbum({
       filePath: this.loadImagePath,
        success(res) {
            console.log('res', res);
                 wx.showToast({
                      title: '已保存到相册',
                       icon: 'success',
                        duration: 3000
                  })
        }
   })
},

预览图片

previewImg: function() {
   wx.showModal({
       title: '提示',
       content: '长按即可保存图片或分享好友',
       confirmText: "确定",
       cancelText: '取消',
       success: (res) => {
            if (res.confirm) {
                wx.previewImage({
                      current: this.loadImagePath, // 当前显示图片的http链接
                      urls: [this.loadImagePath] // 需要预览的图片http链接列表
                 })
             }
         }
  })
}

学习过程中参考的文章，感谢！：
小程序Canvas使用及注意事项
 # 小程序丨canvas内容自适应不同尺寸屏幕

最后编辑于：2020.05.19 16:36:07