使用uniapp编译跨平台项目会遇到不少兼容问题,这里主要讲canvas组件的,编译到微信小程序会有兼容出错问题,这里给讲一下解决方案,希望有帮助。
常见问题
draw无法绘制图形
如果使用CanvasContext
绘制,以下代码,编译到微信小程序上可能发现绘制不出来
const context = uni.createCanvasContext(canvasId,componentInstance);
//...
看canvas组件的属性type="2d"
是否有加,要去掉,因为它,会导致无法绘制
<canvas canvas-id="canv" id="canv" type="2d"></canvas>
测试
type="webgl"
也会无法绘制
draw绘制后无回调
如果是类似以下代码,调用draw(reserve,callback)
绘制方法
draw(false, () => {
//绘制完成后在这里执行回调
})
调试时发现未执行回调
callback
这个原因未知,搜索网上的说改使用以下方法看看能否解决
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()
,代码如下
let ctx = canvas.getContext('2d');
let data = ctx.getImageData(x,y,width,height);
uni.canvasPutImageData
这是设置图像数据的方法,
编译在微信小程序上运行,使用uni.canvasPutImageData也会报错,
报错和上面的问题一样,都是没有获取到canvas
造成的,
需要获取到canvas
元素,然后使用它的原生方法ctx.putImageData()
,代码如下
let ctx = canvas.getContext('2d');
ctx.putImageData(imageData,x,y);
组件canvas需要设置属性
type="2d"
才能获取canvas,
然后,draw()
方法就无法绘制了,
这个2d属性值有的要有的不要,该怎么办呢,这是个兼容问题,试试用条件编译,
如把组件canvas
加上属性type=2d
,就用以下代码才能获取canvas
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文档大同小异文章来源:https://www.toymoban.com/news/detail-784611.html
写到这里,点赞的人在哪呢 (⌐■_■)
文章来源地址https://www.toymoban.com/news/detail-784611.html
到了这里,关于【uniapp】使用canvas组件编译到微信小程序兼容出错问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!