uniapp的canvas生成图片报错之子组件canvas-id

原创 已于 2023-11-10 17:45:28 修改 · 558 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端 #javascript

于 2023-11-10 15:22:55 首次发布
本文介绍了在子组件中使用uni框架的canvasToTempFilePath方法时，如何处理设备像素比以实现清晰的图片转换，以及在调用该函数时确保正确的this指向和尺寸调整。

canvasToTempFilePath: fail canvas is empty

如果是子组件内部创建的上下文uni.createCanvasContext(‘myCanvas’, this);，则生成图片需要加个this指向当前子组件uni.canvasToTempFilePath(callback, this)

canvasToTempFilePath模糊处理

获取设备像素比，然后canvas宽高和真实宽高都乘以设备像素比即可

uni.canvasToTempFilePath({
	canvasId: 'myCanvas',
	height: height * dp,
	width: width * dp,
	destHeight: height * dp,
	destWidth: width * dp,
	success: res => {}
})
侠宁
关注
uniapp - 解决报错 canvasToTempFilePath: fail canvas is empty 画布为空错误，生成海报相册、二维码、条码、裁剪/拼合操作图片报错，加了this还是报错
🏆 前端领域优质创作者
07-20 4338
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，canvasToTempFilePath:失败画布为空，报错，canvasToTempFilePath:failcanvasisempty，不支持2d，还是报错，this，加上this还是报错，vue3没有this怎么办？海报，保存到手机相册，生成二维码，显示条码，图像裁切，图片处理，canvas报错，无法解决，还是fail，依然报错，传了this也不好使，Uniapp小程序，如何解决这个问题
uniapp(微信小程序/支付宝小程序) - 最新解决canavs绘制海报、二维码图片等不显示问题，在uniapp小程序开发中使用canavs制作base64图片在真机运行时空白不显示（详细解决方法）
高级前端工程师
04-08 5136
uni-app，微信小程序，支付宝小程序，uniapp小程序，canvas，base64，微信小程序中base64格式的小程序码通过canvas画出来无效，真机调试二维码不显示的问题。小程序base64编码图片无法使用canvas绘制，uni-app小程序 真机显示canvas上利用base64图片生成的海报，微信小程序中base64格式的小程序码通过canvas画出来无效，解决canvas base64图片在小程序真机不显示问题，无法使用canvas绘制的问题，微信小程序使用canvas真机不生效，微信小
Uni-app开发Canvas当子组件示例，点点绘制图形
H_jrqn的博客
03-14 2096
Uni-app开发Canvas当子组件示例，点点绘制图形
canvas 绘图 ，showShareImageMenu分享图片给好友/朋友圈
最新发布
weixin_58431406的博客
10-29 226
uniapp 微信小程序-根据表单（表单的数据是动态的，数组）绘制生成预检单海报---绘制完成后保存海报--showShareImageMenu分享海报给微信好友-分享海报到朋友圈
uniapp、小程序canvas相关
Dreamy smile
11-20 1092
【代码】uniapp、小程序canvas相关。
【uniapp】使用canvas组件编译到微信小程序兼容出错问题
落叶随风将要去远方，看沿途的风景回忆一场...
09-12 3840
使用uniapp编译跨平台项目会遇到不少兼容问题，这里主要讲canvas组件的，编译到微信小程序会有兼容出错问题，这里给讲一下解决方案，希望有帮助。
在组件中调用createCanvasContext后ctx.draw画不出来（vue3和uniapp和微信小程序）
Technology_hands的博客
07-29 1471
上网查了资料以后，发现 uni.createCanvasContext(CanvansID);在页面中其实默认传了第二个参数this，uni.canvasToTempFilePath也传了this。那么因为我们是vue3，所以引入this应该是这样。请注意vue3的this，要这样获得，并且他叫proxy，并且上下文和获取临时链接都需要加上proxy。我原来在页面中直接写，是可以直接画出来的,是没问题的，然后我把他放到组件中以后就不行了。
uniapp插件使用canvas绘制分享海报
xiaoququ的博客
10-08 2156
插件市场 bug：浏览器上图片不显示，手机上就好了 组件poster.vue <template> <view><canvas :canvas-id="id" :style="'width:' + boardWidth + '; height:' + boardHeight + ';' + customStyle"></canvas></view> </template> <script> /** 从 0x20 开始到
前端 canvas 在微信小程序、uniapp、vue及jsp中的用法
m0_68964998的博客
10-24 1269
前端在不同框架内使用canvas合成图片、海报等
wxml2canvas将小程序页面转化成图片
weixin_43564078的博客
09-05 2201
wxml2canvas将小程序页面转化成图片
uniapp canvas 画图失败
a_biggerfish的博客
11-18 2121
绘制海报过程中微信开发工具报错所canvas最好使用2d，然后我使用2d后一直画图失败，error也监听不到报错，这个为题一直折磨了我好久。
uniapp使用canvas的一些问题
空&白的博客
11-26 9771
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.sha
uniapp：微信小程序uni.canvasToTempFilePath()，报错：canvasToTempFilePath: fail canvas is empty
热门推荐
sunluyi的博客
05-21 1万+
错误原因： 生成海报为了方便调用，将canvas封装在了子组件中。 绘制完海报后，调用uni.canvasToTempFilePath()保存canvas为图片会提示错误信息：canvasToTempFilePath: fail canvas is empty 通过百度了解，在微信小程序子组件中调用canvasToTempFilePath时，需要额外增加一个this uni.canvasToTempFilePath(object, component,this) ctx.draw(true, (ret) =
uni-app APP端 canvas 绘图 不显示
超级小东的博客
08-19 4156
在uniapp中使用uni.canvasToTempFilePath 实测在微信小程序/H5端success(res)回调是base64的图片 在App端返回的是app的本地(临时)路径 不是base64的图片 uni.canvasToTempFilePath({ width: options.width, height: options.height, destWidth: options.width, destHeight: options.height, can
uni-app 组件中的canvas转化为图片报错：errMsg：“canvasToTempFilePath:fail canvas is empty”
qq_36904182的博客
04-21 4931
项目场景： uni-app,开发微信小程序 使用： wx.canvasToTempFilePath({ canvasId: 'line', success: function(res) { console.log('canvasToImg', res); this.radarImg = res.tempFilePath; }, fail: function(res) { console.log(res); } }); 问题描述： echarts
UniApp Vue3 报canvasToTempFilePath:fail fail canvas is empty
weixin_43952913的博客
07-21 2410
uniapp在vue3中报错canvasToTempFilePath:fail fail canvas is empty
使用uni.createCanvasContext创建canvas绘制签名，将uni.canvasToTempFilePath的fileType设置为jpg后，保存预览为纯黑图片的问题
qq_43641501的博客
03-03 1204
fileType为png时(不设置fileType就默认为png)，如果元素的背景色为白色，不放大预览时出来的图片正常，但是png格式的图片背景色默认为透明，而很多机型放大预览图片时背景色是黑色，黑色的背景和黑色的签名，结果就是放大预览就是一坨黑色。为避免以上问题，建议fileType设置为jpg，且在每次重新绘制签名时使用setFillStyle和fillRect重新填充背景色。fileType为jpg时，预览出来的图片就是一坨黑色。切记要设置成白色或者其他与背景色相同的颜色，
【微信小程序】canvasToTempFilePath:fail fail canvas is empty
落叶随风将要去远方，看沿途的风景回忆一场...
11-11 1万+
在微信小程序开发者工具会报错``canvasToTempFilePath:fail fail canvas is empty``，怎么解决呢
uniapp画图 uni.createcanvascontext
dddxz_2的博客
01-12 6908
用uni.createcanvascontext绘制图片。
uniapp canvas生成海报
02-25
canvasId: 'posterCanvas', success(res) { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success() { uni.showToast({ title: '保存成功', icon: 'success' }); } }); }, fail(err){ ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值