微信小程序canvas开发的一些坑和总结-持续更新

一,新版的canvas和旧版不同,需要增加type=2d,且初始化不一样

第一步是html中修改

<canvas canvas-id="myCanvas" /> <!-- 修改为以下 --> <canvas id="myCanvas" type="2d" /> 

第二步是初始化变了

const context = wx.createCanvasContext('myCanvas') // // 修改为以下 // wx.createSelectorQuery() .select('#myCanvas') // 在 WXML 中填入的 id .node(({ 
    node: canvas }) => { 
    const context = canvas.getContext('2d') }) .exec() 

二,在popup弹窗中使用canvas绘制无效

当canvas重新渲染时，canvas中的内容全部都会被清空。 解决 popup弹出后，不要马上绘制，需要等待popup中的canvas渲染完成后，在调用canvas取绘制就好了！
这是因为新版的canvas绘制是同步的,而canvas的初始化又是异步的,这就导致popup弹窗我们用v-if来创建时,就会发生这个问题.
我的修改:

showCanvas(){ 
    this.imgShow=true const that=this that.$nextTick(()=>{ 
    // 使用 fabric 绑定画布 wx.createSelectorQuery() .select('#poster-canvas') // 在 WXML 中填入的 id .fields({ 
    node: true, size: true }) .exec((res) => { 
    // Canvas 对象 const canvasNode = res[0].node // 渲染上下文 that.context = canvasNode.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvasNode.width = res[0].width * dpr canvasNode.height = res[0].height * dpr that.context.scale(dpr, dpr) that.context.clearRect(0, 0, that.context.canvas.width, that.context.canvas.height) const image = canvasNode.createImage() image.src = 'https://open.weixin..com/zh_CN/htmledition/res/assets/res-design-download/icon64_wx_logo.png' image.onload = () => { 
    console.log("图片加载完成",that.context) that.context.drawImage( image, 0, 0, 150, 100, ) that.context.fillStyle="red" that.context.strokeStyle="blue" that.context.beginPath() that.context.moveTo(10,10) that.context.lineTo(60, 10) that.context.lineTo(60, 40) that.context.closePath() that.context.stroke() that.context.fill() // 这里绘制完成 console.log('draw done') } }) }) }, 

也就是放置在nextTick中,等canvas初始化完成后再绘制即可.

三,canvas生成图片并保存到手机系统相册

// 当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径 canvasToTempFilePath(canvas, params) { 
    return new Promise((resolve, reject) => { 
    uni.canvasToTempFilePath( { 
    canvas:canvas, fileType: 'jpg', quality:1, ...params, success: resolve, fail: reject } ) }) }, //下载保存canvas的内容为图片到本地 async saveCanvasToLocal(canvasId){ 
    const { 
    tempFilePath } = await this.canvasToTempFilePath(canvasId, { 
   })//转成图片 uni.saveImageToPhotosAlbum({ 
    filePath: tempFilePath, success: function (data) { 
    wx.hideLoading() wx.showModal({ 
    title: '提示', content: '您的图片已保存到相册', showCancel: false, }) }, fail: function (err) { 
    if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") { 
    // 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用 wx.showModal({ 
    title: '提示', content: '需要您授权保存相册', showCancel: false, success: modalSuccess => { 
    wx.openSetting({ 
    success(settingdata) { 
    console.log("settingdata", settingdata) if (settingdata.authSetting['scope.writePhotosAlbum']) { 
    wx.showModal({ 
    title: '提示', content: '获取权限成功,再次点击图片即可保存', showCancel: false, }) } else { 
    wx.showModal({ 
    title: '提示', content: '获取权限失败，将无法保存到相册', showCancel: false, }) } }, fail(failData) { 
    console.log("failData", failData) }, complete(finishData) { 
    console.log("finishData", finishData) } }) } }) } }, complete(res) { 
    wx.hideLoading() } }); }, 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/te-cxjccs/10899.html