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)

你可能感兴趣的:(uniapp)