微信小程序-使用canvas绘制图片,下载,分享

需求, 使用canvas绘制图片和文字, 生成图片
官方文档
wxml:

<!--pages/canvas/canvas.wxml--><view>  <view class="container">    <button bind:tap="start" class="start" size="mini">选择图片</button>    <button bind:tap="downloadCanvas" class="downloadCanvas" size="mini">下载</button>    <button bind:tap="share" class="share" size="mini">分享</button>    <!-- 分享图片功能 -->  </view>  <text>canvas区域</text>  <canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px;border: 1px solid grey;' canvas-id='myCanvas'></canvas>  <image v-if="previewImage" :src="{{canvasImage}}"></image></view>

效果图

布局太简单, 就不展现了

选择图片功能

先设置canvas区域的宽度和高度

js代码

  data: {    title: 'canvas绘制图片',    canvasWidth: '', // canvas宽度    canvasHeight: '', // canvas高度    imagePath: '', // 分享的图片路径    leftMargin: 0,    topMargin: 0,    imgInfo: {},    ctx: [],    canvasImage: '',    previewImage: false,    imgProportion: 0.8, // 图片占canvas画布宽度百分比    imgToTop: 100 // 图片到canvas顶部的距离  },  onLoad: function(options) {    var that = this    var sysInfo = wx.getSystemInfo({      success: function(res) {        that.setData({          canvasWidth: res.windowWidth,          // 我这里选择canvas高度是系统高度的80%          canvasHeight: res.windowHeight * 0.8        })        // 根据图片比例, 使图片居中        let leftMargin = (res.windowWidth * (1 - that.data.imgProportion)) / 2        that.setData({          leftMargin        })      }    })  }

接下来选择图片

// 点击选择图片按钮触发start: function() {    let that = this    let ctx = wx.createCanvasContext('myCanvas')    // 设置canvas背景色, 否则制作的图片是透明的    ctx.setFillStyle('#f8f8f8')    ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasHeight)    this.addImage(ctx)  },  // 增加图片  addImage: function(ctx) {    var that = this;    let imgInfo = that.data.imgInfo    var path    wx.chooseImage({      count: '1',      success(res) {        wx.getImageInfo({          src: res.tempFilePaths[0],          success: function(response) {            // 返回的response里有图片的临时路径和图片信息(高度/宽度)            that.setData({              imgInfo: response,              path: response.path            })            that.drawImage(ctx)          }        })      }    })    this.addTitle(ctx)  },

绘制文字和图片

  // 绘制图片  drawImage(ctx) {    let that = this    let imgInfo = that.data.imgInfo    let path = that.data.path    // 计算图片宽度 宽度固定 高度等比缩放    let imgWidth = that.data.canvasWidth * that.data.imgProportion    let imgHeight = imgInfo.height / imgInfo.width * imgWidth    // drawImage参数, 下面会说明    ctx.drawImage(path, 0, 0, imgInfo.width, imgInfo.height, that.data.leftMargin, that.data.imgToTop, imgWidth, imgHeight)    ctx.draw()    that.data.previewImage = true  },  //绘制文字  addTitle: function(ctx) {    var str = this.data.title    ctx.font = 'normal bold 16px sans-serif';    ctx.setTextAlign('center'); // 文字居中    ctx.setFillStyle("#222222");    ctx.fillText(str, this.data.canvasWidth / 2, 45)  // 文字位置  },

drawImage方法

官方文档
drawImage 方法允许在 canvas 中插入其余图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：

drawImage(image, dx, dy) 在画布指定位置绘制原图
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分 从 1.9.0 起支持

参数形容

image
所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）
sx
需要绘制到画布中的，image的矩形（裁剪）选择框的左上角 x 坐标
sy
需要绘制到画布中的，image的矩形（裁剪）选择框的左上角 y 坐标
sWidth
需要绘制到画布中的，image的矩形（裁剪）选择框的宽度
sHeight
需要绘制到画布中的，image的矩形（裁剪）选择框的高度
dx
image的左上角在目标 canvas 上 x 轴的位置
dy
image的左上角在目标 canvas 上 y 轴的位置
dWidth
在目标画布上绘制imageResource的宽度，允许对绘制的image进行缩放
dHeight
在目标画布上绘制imageResource的高度，允许对绘制的image进行缩放

图片可能更直观

image.png

下载图片

  //点击下载按钮保存canvas图片  downloadCanvas: function() {    let that = this;     // 判断客户能否选择了图片    if (that.data.previewImage) {      wx.canvasToTempFilePath({        x: 0,        y: 0,        width: that.canvasWidth,        height: that.canvasWidth,        destWidth: that.canvasWidth,        destHeight: that.canvasHeight,        canvasId: 'myCanvas',        success: function success(res) {          wx.saveImageToPhotosAlbum({            filePath: res.tempFilePath,            success(res) {              console.log(res, '保存')            }          })        }      });    } else {      wx.showToast({        title: '请先选择图片',        image: '../../static/img/error.png'      })    }  }

分享图片

// 分享图片  share() {    let that = this    if (that.data.previewImage) {      wx.canvasToTempFilePath({        x: 0,        y: 0,        width: that.canvasWidth,        height: that.canvasWidth,        destWidth: that.canvasWidth,        destHeight: that.canvasHeight,        canvasId: 'myCanvas',        success: function success(res) {          wx.showToast({            icon: 'none',            title: '长按图片分享',            duration: 1500          })          setTimeout(            () => {              wx.previewImage({                urls: [res.tempFilePath]              })            }, 1000)        }      })    } else {      wx.showToast({        title: '请先选择图片',        image: '../../static/img/error.png'      })    }  }