微信小程序?qū)崿F(xiàn)從手機相冊選擇圖片述召，繪制到canvas上并保存到手機上
第一步：wxml用canvas標簽朱转，并設(shè)置唯一id
<canvas canvas-id="myCanvas" style="width:600rpx;height:800rpx;"></canvas>
注意：
1.標簽canvas，配合使用的是 canvas-id积暖；
2.要設(shè)置繪制區(qū)域的大小肋拔，可根據(jù)需求或者設(shè)計圖設(shè)置寬和高。
第二步：canvas畫圖呀酸，drawCanvas是一個基礎(chǔ)繪畫凉蜂，在沒從相冊選擇圖片時候進行的展示樣式；別忘了在onload（）里面調(diào)用一下這個方法。
// canvas畫圖
drawCanvas: function() {
// 先定義一下窿吩，獲取創(chuàng)建 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"是選擇圖片的個數(shù)茎杂，這些參數(shù)官方文檔都有，我就不贅述了纫雁，上鏈接https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
再看煌往，我的wx.chooseImage的success方法里又有一個wx.getImageInfo方法，這個是為了獲取圖片信息轧邪，看注釋掉的代碼刽脖，之前選擇的是wx.downloadFile時候，在編輯器上可以忌愚，但是真機上就不顯示圖片曲管，所以后來換了wx.getImageInfo就可以了。
官方文檔上是明確說了硕糊，如果需要繪制圖片院水，是需要將網(wǎng)絡圖片下載下來的,所以下述兩個方法都可以試試。鏈接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參數(shù)為false, 本次繪制不接著上一次繪制,默認false
// draw參數(shù)為true, 本次繪制接著上一次繪制
ctx.draw()
}
第五步：就是點擊然后保存照片到手機上了，wx.canvasToTempFilePath是把當前畫布指定區(qū)域的內(nèi)容導出生成指定大小的圖片初坠， 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文件夾是相關(guān)內(nèi)容半沽。
https://github.com/Yanxinyue0922/miniprogram.git
