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

这篇具有很好参考价值的文章主要介绍了【uniapp】使用canvas组件编译到微信小程序兼容出错问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用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
canvasgetimagedata:fail fail canvas is empty,uniapp,uni-app,微信小程序,canvas,兼容,zs-canvas

这是需要多传一个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文档大同小异

写到这里,点赞的人在哪呢 (⌐■_■)
canvasgetimagedata:fail fail canvas is empty,uniapp,uni-app,微信小程序,canvas,兼容,zs-canvas文章来源地址https://www.toymoban.com/news/detail-784611.html

到了这里,关于【uniapp】使用canvas组件编译到微信小程序兼容出错问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用 canvas 2d 实现签字板组件

    本文是在微信小程序中使用 canvas 2d 来实现签字板功能; 效果图: 代码: 1、wxml 2、js 3、总结 canvas 的宽度和高度可以写死,也可以根据当前可是区域动态计算;需要注意的是 res[0].node 的宽度和高度的计算是当前 canvas 元素上的宽度和高度乘设备的 pixelRatio ;

    2024年02月09日
    浏览(49)
  • uniapp运行到微信小程序踩坑记录

    提示TypeError: Property value expected type of string but got undefined 打包时提示以下报错 因为标签绑定绑定一个函数的参数中传入一个函数时,不能直接加入括号传承,不支持方法中套方法的操作, 错误: 正确 应该把参数传入函数中以回调的形式去调用,不能直接在标签上嵌套 Error

    2024年02月16日
    浏览(70)
  • uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字

    最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。 uniapp中使用画布,实现图片的编辑-批量批改图片 1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图

    2024年04月14日
    浏览(63)
  • uniapp代码运行到微信小程序报unexpected character ` `

    用uniapp写的小程序,在h5预览正常,在小程序预览时点击按钮发现导航栏跳到了目标页面,但内容没变,同时控制台报目标页面有unexpected character 问题 由于wxml代码是uniapp转换来的,很多堆积在一起,所以报错的wxml:2:0并不是该文件第二行。滚动微信开发者工具内问题wxml,仔细

    2024年02月11日
    浏览(67)
  • 关于UniApp启动到微信小程序工具提示找不到app.json

    第一种情况 在  uni-app  开发中使用  vue-cli-plugin-uni  插件创建项目时,如果出现找不到  app.json  的错误,可能是以下原因导致的: 项目根目录下缺少  pages  和  globalStyle  目录。 app.json  文件中配置的  pages  和  globalStyle  字段对应的目录必须存在,如果不存在或者目录

    2024年02月12日
    浏览(67)
  • HbuilderX运行uniapp项目到微信小程序时,自动打开了微信小程序开发工具但是进不去项目

    这样选择之后,运行时一直停在打开微信开发者工具不能进入项目,如图: 这是因为你当前不是这个微信小程序的开发者,联系管理员添加你为当前小程序的开发者就行了。 或者是更换appid

    2024年02月11日
    浏览(66)
  • uniapp,微信小程序确认收货组件的使用

     这里很容易误会成,执行success函数,就收货成功了。其实要根据返回的参数来判断是否真的收货成功。 微信文档上也有说明:  

    2024年02月08日
    浏览(60)
  • 【微信小程序】解决canvas组件层级最高问题

    1、为什么canvas组件总是会在最上层? 因为canvas组件是由客户端创建的原生组件, 原生组件层级是最高的 ,所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上 。 2、如何解决canvas层级最高问题?                                                    wx

    2024年02月11日
    浏览(51)
  • 微信小程序canvas绘制自适应图片,UniApp canvas绘制自适应图片

     需求:画布宽高为686 * 686 的正方形(可以进行调整根据自身需要来)             当图片宽度大于高度时,对图片宽度进行裁剪              当图片高度大于宽度时,对图片高度进行裁剪              我是用uniApp进行开发的,如果是小程序原生,直接把“uni” 改为 “

    2024年02月09日
    浏览(66)
  • uniapp使用微信小程序提供的原生插件(组件)

    小程序交易保障标展示组件 为例 参考uniapp加载插件、微信小程序加载插件 1. manifest.json: 先打开manifest.json文件,然后我们找到\\\"mp-weixin\\\",引入需要使用的插件 2. pages.json 打开pages.json文件,然后再对应的页面配置处添加东西 3.页面使用

    2024年02月11日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包