小程序 -- 点击canvas生成图片并保存实践
小程序保存图片流程如下
- 查询是否授权过写入图片的权限 ⬇️
- 授权失败打开熟悉系统设置、拒绝授权提示重新点击 ⬇️
- canvas绘制 ⬇️
- canvas转本地临时图片 ⬇️
- 本地临时图片保存到手机相册 ✅
view
<canvas style="width: {{imageWidth}}px; height: {{imageHeight}}px;" canvas-id="canvas"></canvas>
<view bindtap="saveImg" class="">
<text>生成海报</text>
</view>
data
data: {
imageWidth: 750,
imageHeight: 1239,
}
全部方法
saveImg(){
wx.showLoading({
title: '授权中',
})
wx.getSetting({
success: (res) => {
console.log('res')
console.log(res)
if (!res.authSetting['scope.writePhotosAlbum']) {
console.log('authorize')
// 未授权,授权中
wx.authorize({
scope:'scope.writePhotosAlbum',
success: () => {
console.log('授权成功')
this.createImg()
},
fail(err){
wx.openSetting({
success: (res) => {
console.log(res)
console.log(err)
wx.hideLoading()
wx.showToast({
title: '请重新授权',
icon: 'none'
})
},
fail: () => {
wx.hideLoading()
wx.showToast({
title: '异常,请重新授权',
icon: 'none'
})
}
})
}
})
// 已经授权
}else{
this.createImg()
}
}
})
},
createImg(){
wx.hideLoading()
this.drawCanvas()
var imageWidth = this.data.imageWidth
var imageHeight = this.data.imageHeight
wx.canvasToTempFilePath({ //将canvas生成图片
canvasId: 'canvas',
x: 0,
y: 0,
width: imageWidth,
height: imageHeight,
destWidth: imageWidth, //截取canvas的宽度
destHeight: imageHeight, //截取canvas的高度
success: (res) => {
wx.saveImageToPhotosAlbum({ //保存图片到相册
filePath: res.tempFilePath,
success: () => {
wx.showToast({
title: "海报已保存到相册",
duration: 2000
})
}
})
}
})
},
drawCanvas(){
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('canvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
},
注意
- 使用authorize之后不会弹出授权,那是没有在失败里面设置打开系统设置。
效果
--完--