uniapp使用canvas问题记录

1、canvas无效,出不来
修改前:

let ctx = uni.createCanvasContext('shareCanvas');

修改后:

let ctx = uni.createCanvasContext('shareCanvas', this);

在自定义组件下,第二个参数传入组件实例this,若不传,则无法显示

2、canvas绘制图片(drawImage)无效,显示不了
修改前:

let imageW=uni.upx2px(456)//图片的尺寸
let imgUrl=this.shareData.image//动态的图片,网络路径
ctx.drawImage(imgUrl,0,0,imageW,imageW)
ctx.draw();

修改后:

let imageW=uni.upx2px(456)//图片的尺寸
let imgUrl=this.shareData.image//动态的图片,网络路径
uni.downloadFile({
    url:imgUrl,
    success(res){
        ctx.drawImage(res.tempFilePath,0,0,imageW,imageW)
        ctx.draw();
    }
})

uniapp的drawImage绘制图片和微信小程序一样,图片路径不能使用网络路径,必须先下载到本地(使用uni.downloadFile()下载成临时文件路径也行)

3、canvas生成图片提示

使用uni.canvasToTempFilePath出现如图错误,那么要检查下canvasId是否填写错误

uni.canvasToTempFilePath({
    canvasId: 'myCanvas',
})

如果没有填写错误,又是在组件中使用,那么canvasToTempFilePath的第二个参数必须要传入,简单的来说就是要加this,但是又不能直接加this

var that=this
uni.canvasToTempFilePath({
    canvasId: 'myCanvas',
},that)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容