微信小程序cavas画图并保存

需求背景：

因微信小程序暂不支持一键分享到朋友圈功能，故要生成图片并保存到手机相册就有两种状况：

1.需保存的图片为静态固定图片。这种状况图片可直接由后端返回，再调用小程序相应api直接保存到手机相册；

2.需保存的图片为动态生成图片（好比，该图片上的用户头像、昵称、根据特有标志生成的小程序码等），此时有两种可行方案，

一是让后端动态生成图片返给前端，再由前端保存；二是前端本身绘制图片并保存。绘制图片对于先后端来讲都会消耗必定时间，但考虑到

大量用户同时发起该请求时，会下降服务器性能，故最终采用第二种方案。

 

canvas绘图实现步骤

1.首先在wxml文件里引入<canvas>组件，并自定义所需长宽，同时给一个id

示例以下：

 

2.在对应js文件绘制咱们所需的图片

drawImage() { // canvas绘制函数

const { drawInfo } = this.data;

const ctx = wx.createCanvasContext('sharePic');

// 背景

ctx.setFillStyle('#fff');

ctx.fillRect(0, 0, rpx2px(409), rpx2px(560));

if (drawInfo) {  // 将下载好的图片按需按序排列，之因此要从新排列，是由于图片是异步下载，其顺序可能与咱们指望的有误差

const { imgArr } = this.data;

const imgArrSort = [];

for (let i = 0; i < imgArr.length; i += 1) {

imgArrSort[imgArr[i].key] = imgArr[i].url;

}

// ctx.save(); // 保存当前画布内容

// 用户头像

// ctx.strokeStyle = '#fff';

// ctx.lineWidth = rpx2px(2);

// ctx.beginPath();

// ctx.arc(rpx2px(83), rpx2px(60), rpx2px(30), 0, 2 * Math.PI);

// ctx.closePath();

// ctx.stroke();

// ctx.clip();

// ctx.drawImage(

// imgArrSort[0],

// rpx2px(53),

// rpx2px(30),

// rpx2px(60),

// rpx2px(60)

// );

// ctx.restore(); // 恢复当前画布内容

// 昵称

ctx.setFillStyle('#000');

ctx.setTextAlign('center');

ctx.setFontSize(rpx2px(16));

ctx.fillText(drawInfo.nickname, rpx2px(204), rpx2px(59));

// 图片标题

ctx.setFillStyle('#fe4070'); // 文字颜色：黑色

ctx.setFontSize(rpx2px(26));

ctx.fillText(drawInfo.share_title, rpx2px(204), rpx2px(127));

// 图片

ctx.drawImage(

imgArrSort[0],

rpx2px(53),

rpx2px(154),

rpx2px(302),

rpx2px(201)

);

// 小程序码

const qrImgSize = rpx2px(140);

ctx.drawImage(

imgArrSort[1],

rpx2px(56),

rpx2px(377),

qrImgSize,

qrImgSize

);

// 小程序码文字说明

ctx.setFillStyle('#333');

ctx.setTextAlign('left');

ctx.setFontSize(rpx2px(17));

ctx.fillText('长按识别小程序码', rpx2px(213), rpx2px(435));

ctx.draw();

} else {

// 获取绘制信息失败

// 图片加载失败提示文案

ctx.setFillStyle('#999'); // 文字颜色：黑色

ctx.setFontSize(rpx2px(22));

ctx.fillText('图片加载失败', rpx2px(140), rpx2px(280));

ctx.setFillStyle('#fff');

ctx.draw();

}

},

downLoadImg(imgList) { //图片下载函数，之因此要先将其下载，是由于若是图片较大或其下载完成速度<canvas绘制速度，图片处会是空白

const that = this;

for (let i = 0; i < imgList.length; i += 1) {

wx.downloadFile({

url: imgList[i],

success: res => {

const { imgArr } = that.data;

imgArr.push({ key: i, url: res.tempFilePath });

that.setData({

imgArr

});

　}

});

}

}

 

3.保存canvas绘制图片到相册

saveImage() {

wx.canvasToTempFilePath({

canvasId: 'sharePic',

success(res) {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success() {

wx.showToast({

title: '图片已保存至相册'

});

   }

});

   }

});

}

 

值得思考的几个问题：