微信小程序实现从手机相册选择图片，绘制到canvas上并保存到手机上
第一步：wxml用canvas标签，并设置唯一id
<canvas canvas-id="myCanvas" style="width:600rpx;height:800rpx;"></canvas>
注意：
1.标签canvas，配合使用的是 canvas-id；
2.要设置绘制区域的大小，可根据需求或者设计图设置宽和高。
第二步：canvas画图，drawCanvas是一个基础绘画，在没从相册选择图片时候进行的展示样式；别忘了在onload（）里面调用一下这个方法。
// canvas画图
drawCanvas: function() {
// 先定义一下，获取创建 myCanvas是canvas-id名
const ctx = wx.createCanvasContext('myCanvas');
ctx.setStrokeStyle('red')
ctx.strokeRect(0, 0, 299, 399)
ctx.setFillStyle('pink')
ctx.fillRect(1, 1, 297, 397)
ctx.draw()
}
未选择图之前的展示
第三步：wx.chooseImage是可以从相册选择图片的方法,"count"是选择图片的个数，这些参数官方文档都有，我就不赘述了，上链接https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
再看，我的wx.chooseImage的success方法里又有一个wx.getImageInfo方法，这个是为了获取图片信息，看注释掉的代码，之前选择的是wx.downloadFile时候，在编辑器上可以，但是真机上就不显示图片，所以后来换了wx.getImageInfo就可以了。
官方文档上是明确说了，如果需要绘制图片，是需要将网络图片下载下来的,所以下述两个方法都可以试试。链接https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
myButton: function() {
let that = this;
wx.chooseImage({
count: 1,
success: function(res) {
const tempFilePaths = res.tempFilePaths[0]
that.setData({
getImg: res.tempFilePaths[0].trim()
})
console.log(44444, res)
wx.getImageInfo({
src: that.data.getImg,
success: function(res) {
console.log(88888,res)
that.drawImg(res.path.trim())
}
})
// wx.downloadFile({
// url: that.data.getImg,
// success: function(res) {
// if (res.statusCode === 200) {
// console.log('图片成功', res)
// that.drawImg(res.tempFilePath.trim())
// } else {
// reject(e);
// }
// },
// fail: function(err) {
// console.log(333, err)
// }
// })
console.log('图片地址', res.tempFilePaths[0])
},
})
}
第四步：将下载后的图片绘制到canvas画布上，如果背景等没有更改，即可以像我写的那样再绘制一次，如果更改，正好可以重新绘制。我画的比较简单，就是一张图片加一个介绍词什么的，你可以用用户的名字。
const ctx = wx.createCanvasContext('myCanvas');
ctx.setStrokeStyle('red')
ctx.strokeRect(0, 0, 299, 399)
ctx.setFillStyle('pink')
ctx.fillRect(1, 1, 297, 397)
ctx.drawImage(url, 2, 2, 296, 296)
ctx.setFontSize(28)
ctx.setFillStyle('#FFFFFF')
// 文字居中 在画布中间居中
ctx.fillText("您好：" + this.data.name, (300 - ctx.measureText("您好：" + this.data.name).width) / 2, 330);
// draw参数为false, 本次绘制不接着上一次绘制,默认false
// draw参数为true, 本次绘制接着上一次绘制
ctx.draw()
}
第五步：就是点击然后保存照片到手机上了，wx.canvasToTempFilePath是把当前画布指定区域的内容导出生成指定大小的图片， wx.saveImageToPhotosAlbum是把图片保存到手机相册。看代码
getImg: function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height: 400,
destWidth: 300,
destHeight: 400,
canvasId: 'myCanvas',
success(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功啦！',
icon: 'success'
})
}
})
console.log(res.tempFilePath)
}
})
}
最后效果图
以上就是所有的步骤，如果需要的话下载链接，下面的drawCanvas文件夹是相关内容。
https://github.com/Yanxinyue0922/miniprogram.git
