【uniapp】使用canvas组件编译到微信小程序兼容出错问题

使用uniapp编译跨平台项目会遇到不少兼容问题,这里主要讲canvas组件的,编译到微信小程序会有兼容出错问题,这里给讲一下解决方案,希望有帮助。

常见问题

draw无法绘制图形

如果使用CanvasContext绘制,以下代码,编译到微信小程序上可能发现绘制不出来

javascript 复制代码
const context = uni.createCanvasContext(canvasId,componentInstance);
//...

看canvas组件的属性type="2d"是否有加,要去掉,因为它,会导致无法绘制

html 复制代码
<canvas canvas-id="canv" id="canv" type="2d"></canvas>

测试type="webgl"也会无法绘制

draw绘制后无回调

如果是类似以下代码,调用draw(reserve,callback)绘制方法

javascript 复制代码
draw(false, () => {
	//绘制完成后在这里执行回调
})

调试时发现未执行回调callback

这个原因未知,搜索网上的说改使用以下方法看看能否解决

javascript 复制代码
draw(false, setTimeout(() => {
	//这里执行回调
	callback()
}, 258))

不建议用,编译到其它平台可能会报类型错误

抛出错误

uni.canvasToTempFilePath

这是将画布导出成图片的方法,

编译在微信小程序上运行报错内容如下,使用uni.canvasToTempFilePath报错

canvasToTempFilePath:fail fail canvas is empty

这是需要多传一个canvas,看看微信小程序的官方文档是这样写的

有个文章可以看看 canvasToTempFilePath:fail fail canvas is empty

里面讲了,组件canvas需要设置属性type="2d"才能获取,

而uniapp文档上没有说,加这个就无法绘制...

uni.canvasGetImageData

这是获取图像数据的方法,

编译在微信小程序上运行报错内容如下,使用uni.canvasGetImageData也报错了

canvasGetImageData:fail fail canvas is empty

需要获取到canvas元素,然后使用它的原生方法ctx.getImageData(),代码如下

javascript 复制代码
let ctx = canvas.getContext('2d');
let data = ctx.getImageData(x,y,width,height);

uni.canvasPutImageData

这是设置图像数据的方法,

编译在微信小程序上运行,使用uni.canvasPutImageData也会报错,

报错和上面的问题一样,都是没有获取到canvas造成的,

需要获取到canvas元素,然后使用它的原生方法ctx.putImageData(),代码如下

javascript 复制代码
let ctx = canvas.getContext('2d');
ctx.putImageData(imageData,x,y);

组件canvas需要设置属性type="2d"才能获取canvas,

然后,draw()方法就无法绘制了,

这个2d属性值有的要有的不要,该怎么办呢,这是个兼容问题,试试用条件编译,

如把组件canvas加上属性type=2d,就用以下代码才能获取canvas

javascript 复制代码
uni.createSelectorQuery().in(this).select("#canv").fields({
	size:true,
	// #ifdef MP-WEIXIN
	node:true
	// #endif
},res=>{
	//res.node 就是 canvas 2d元素
	let canvas = res.node;
	//...
}).exec()

使用插件

可以看看这篇文章 微信小程序提示wx.createCanvasContext方法已废弃的解决方案

用上面讲得已废弃的解决方案 重写,绘制逻辑就按照draw()的绘制原理方法实现即可,

zs-canvas

使用条件编译,把编译到微信小程序的代码段区分开来,

对新手来说,若觉得使用条件编译太麻烦,可以试试uniapp项目的画布插件 zs-canvas

将插件导入到自定义组件文件夹中就可以用,注意细节看说明文档,用法与uniapp API文档大同小异

写到这里,点赞的人在哪呢 (⌐■_■)

相关推荐
小徐_233315 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
李李记18 小时前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
iOS阿玮19 小时前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw521 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !21 小时前
uni-app中v-if使用”异常”
前端·uni-app
Emma歌小白1 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子1 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张1 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview