這篇主要講canvas繪制以及保存到本地相冊的方法
實現(xiàn)功能如下：
1.用戶手動輸入文字骑歹，并把這些文字繪制到canvas中
2.將圖片繪制到canvas中
3.將canvas變成圖片并保存到本地相冊中
效果如圖：
3.png
b.png
第一部分 wxml
<canvas type="2d" id='MyCanvas' style="width:{{widthC}}px;height:{{heightC}}px;" wx:if="{{showCanvas}}"
要注意寫這種形式tpye='2d'预烙，這是新版本的，舊版本的如下圖已經(jīng)不維護了道媚，所以建議寫這種扁掸，另外要注意id，不是寫canvas-id最域，而只是id
image
第二部分 js
第一步谴分，先獲取canvas標簽
const canvasQuery = wx.createSelectorQuery()
//返回一個對象實例，通過實例可以獲取canvas
canvasQuery.select('#MyCanvas')
.fields({
node: true,
size: true,
rect: true
})
.exec(this.CanvasInit.bind(this))
//bind(this)包含了canvas的node镀脂，size和rect
第二步牺蹄，初始化并繪制canvas
const width = res[0].width
this.canvasWidth = width
const height = res[0].height
this.canvasHeight = height
const canvas = res[0].node
this.canvas = canvas
const ctx = canvas.getContext('2d')
//使canvas適應(yīng)各種屏幕不至于大小不同
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
//畫布背景顏色
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, width, height)
// 繪制圖片 這里要注意drawImage方法中傳入的是img對象，而不是img.src
const img = canvas.createImage()
img.src = ImgPath // 可以是本地地址也可以是網(wǎng)絡(luò)地址
img.onload = () => ctx.drawImage(img, 0, 0, this.widthImg, this.heightImg)
// 繪制文字部分
// console.log(this.widthImg)
ctx.fillStyle = "#000000"
ctx.font = "normal 18px Arial"
ctx.fillText(this.time, 18, this.heightImg + 20)
ctx.fillText(this.wea, 150, this.heightImg + 20)
第三步薄翅，獲取用戶保存圖片權(quán)限
通過wx.getSetting()來獲取用戶已經(jīng)授權(quán)過的權(quán)限信息沙兰。注意如果用戶已經(jīng)授權(quán)
過，那么所獲取的權(quán)限信息里面就會有scope.writePhotosAlbum翘魄，即使是沒有同意
也會存在scope.writePhotosAlbum鼎天，所以不要誤以為有scope.writePhotosAlbum
就是一定同意了。還有一個坑的地方就是如果用戶第一次授權(quán)沒有同意暑竟，那么之后就
不會再彈出授權(quán)對話框斋射，需要自己進行判斷。
if (['scope.writePhotosAlbum'] in res.authSetting) {
// 如果授權(quán)過且同意了
if (res.authSetting[`scope.writePhotosAlbum`]) {
this.canvasToImgSave()
} else {
wx.showModal({
title: "請求授權(quán)相冊存儲",
content: "需要獲取您的相冊存儲權(quán)限，請確認授權(quán)",
success: res => {
if (res.confirm) {
wx.openSetting({
success: res => {
this.canvasToImgSave()
console.log(res)
},
fail: err => {
console.log(err)
}
})
} else if (res.cancel) {
console.log("你又取消了")
}
}
})
}
} else {
this.canvasToImgSave()
}
}
第四步罗岖，將canvas繪制成圖片并保存
這里也有一個小坑涧至，就是在繪制圖片的時候會消耗一點時間，因此不能立即就繪制
成功桑包。如果你沒有等待繪制成功就直接保存圖片的話就會使保存的圖片為空白南蓬。這時
可以使用wx.showloading來提示用戶圖片在生成中。
wx.showLoading({
title: '生成中...',
})
wx.canvasToTempFilePath({
canvas: this.canvas,
x: 0,
y: 0,
width: this.canvasWidth * 2,
height: this.canvasHeight * 2,
destWidth: this.canvasWidth * 2,
destHeight: this.canvasHeight * 2,
success: res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
// console.log(this.saveTempFilePath)
wx.showModal({
title: "保存成功捡多！",
content: "圖片已保存到本地相冊",
showCancel: false,
success(res) {
if (res.confirm) {
wx.reLaunch({
url: '/pages/joinU/joinU'
})
}
}
})
},
fail: err => {
console.log(err)
}
})
},
fail: err => {
console.log(err)
}
})
setTimeout(() => {
wx.hideLoading()
}, 1000)
這么一寫下來也沒有什么特別難的地方蓖康。其實還可以實現(xiàn)用戶手動上傳圖片铐炫，這樣可能會更有趣一點
