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

已于 2023-11-10 17:45:28 修改
阅读量253 收藏
点赞数
文章标签： uni-app 前端 javascript
于 2023-11-10 15:22:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ReXplan/article/details/134333896
版权

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 => {}
})
侠宁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。
canvas在小程序的坑，白屏和canvasToTempFilePath: fail canvas is empty
陈小白
06-27 2843
第一个坑 画布白屏，找不到canvas createCanvasContext,在其他平台不需要第三个参数this,而在小程序 需要 第三个参数this才可以，这样就可以绘制canvas 第二个坑 draw绘制后 canvasToTempFilePath 一直报错 ：canvasToTempFilePath: fail canvas is empty，也是需要添加this参数和添加一个定时器就可以绘制出图片，...
【uniapp】使用canvas组件编译到微信小程序兼容出错问题
TA远方
09-12 1855
使用uniapp编译跨平台项目会遇到不少兼容问题，这里主要讲canvas组件的，编译到微信小程序会有兼容出错问题，这里给讲一下解决方案，希望有帮助。
uniapp中canvas的基础使用
最新发布
前端程序猿的博客
02-27 1412
canvas是uniapp中提供的一个组件,用于生成自定义的图形界面。通过canvas,我们可以通过JavaScript代码在页面上绘制各种图形和图像。
uniapp 签名组件
weixin_47087818的博客
08-16 686
uniapp 签名组件
uni-app 微信小程序中如何通过 canvas 画布实现电子签名？
跟着飞哥学编程（全栈联盟）
09-03 3826
写在最后，小编是一个注重解决实际问题的博主，日常分享案例皆是工作中的实际项目背景。利用 canvas 画布，模拟人工在纸张上手写的笔迹。原理其实很简单，就是你在画布上任意涂写即可，最后保存整个画布区域的内容为图片。这里我加了几个操作按钮，应该能满足您基本的数字签名需要了，最后我也会贴上我的源码。可以说，只要是涉及纸质文档签字盖章的场景，都能够使用电子印章，电子签名。3、笔迹开始，移动，结束，还有底部预览，重写，保存，上传等附加操作按钮。
关于uniapp 中使用canvas 的坑 H5不显示问题
weixin_39475476的博客
11-22 9244
本人本来刚入小程序的坑,公司就来一波需求说: 希望 我前期开发出小程序后 后期还要开发出一套一模一样的H5 出来 ,what? 好的 于是乎 我用了 taro 但是react 我不是很熟悉,开发有点吃力,为了节约时间 后来放弃,选择跳入基于vue的 uniapp 这个坑 ,一来我就遇到很多问题:比如图片怎么也不不显示啊,组件嵌套不能canvas不能显示啊,传值出现问题啊 等等.而本文 我要记录的...
uni-app之使用内置组件Canvas
码奴一只猿
07-04 9503
UniApp 是一个基于 Vue.js 的跨平台开发框架，它允许开发者使用一套代码同时构建多个平台的应用程序。UniApp 提供了丰富的内置组件，其中包括 Canvas 组件，用于在应用中绘制图形和实现图形动画效果。本文将详细介绍 UniApp 内置组件 Canvas 的使用方法，以及提供示例代码和说明，帮助读者快速上手。
微信签名生成图片回显错位 提示canvas-id已经存在
qq_45016428的博客
11-10 1542
我的这个问题产生原因是因为我使用了wx:if=""来判断签名版的显示和隐藏，所以会造成这个canvas-id已经存在，并且回显的签名照片错位，怎么调整都不行，签名前和签名后的签名位置都不相同。 解决办法：利用css属性display来控制canvas的显示与隐藏，style=“display:{{cssFlg}}” 赋值 cssFlg=“none” 来控制隐藏 cssFlg=“black” 来控制显示 这样不会出现错位和canvas-id存在这个问题 还有就是生成图片的方向问题，一般生成的图片为竖着的，
微信小程序之通过Canvas生成图片保存到手机相册
12-30
微信小程序之通过Canvas生成图片保存到手机相册
js 将canvas生成图片保存,或直接保存一张图片的实现方法
10-18
下面小编就为大家分享一篇js 将canvas生成图片保存,或直接保存一张图片的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
canvas.toDataURL image/png 报错处理方法推荐
01-21
遇到一个需求，要对播放的视频进行截图，视频使用video标签来播放，然后点击视频播放区域时截取实时的帧图片。 代码很简单如下： JavaScript Code复制内容到剪贴板 var video = document.getElementById(‘video...
html2canvas生成的图片偏移不完整的解决方法
11-20
问题背景：生成的图片在一个弹窗里面，如果页面没有滚动条就是正常的，但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边，如下：   解决办法：   楼主查了很多资料，也...
uniapp使用canvas的一些问题
空&白的博客
11-26 8101
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
canvas完全无法显示的问题
FanBrother的博客
10-16 8104
第一，使用canvas标签时script标签要放在body的下面，放在head里面就可能显示不出来。想起上次做火焰特效，script放到head中，帧数明显下降。这里貌似涉及到JS性能优化和浏览器如何渲染HTML文件的问题（算了不深究了）。 第二，别再把方法和函数名写错了。 下面是W3C教程上的演示代码，只修改了图片的位置：<!DOCTYPE html> <html> <body><p>要使用的
微信小程序学习之路——API界面（二）
创作星球
04-08 1041
绘图 之前提到过<canvas/>组件，再<canvas/>组件中画图必须通过本小结介绍的API实现，<canvas/>中存在一个二维坐标体系，左上角的坐标为（0，0）所有绘图API都会基于这个坐标体系进行绘制。绘图过程大致可以分为3步： 创建执行上下文 通过执行上下文进行绘制描述 调用绘图API，将绘制描述绘制到<canvas/> 示例代码...
uniapp 手写canvas海报（兼容android/ios/h5/微信小程序）
m0_61454727的博客
12-13 3572
uniapp 手写canvas海报（兼容android/ios/h5/微信小程序），轻松加愉快
＜canvas＞
02-28 144
HTML<canvas>标签 实例 通过 <canvas> 元素来显示一个红色的矩形： <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx....
UniApp 用canvas生成图片保存本地
05-19
UniApp 中可以使用 Canvas 组件来生成图片，并使用 uni.canvasToTempFilePath 接口将 Canvas 画布内容转为临时文件路径，最后使用 uni.saveImageToPhotosAlbum 接口将临时文件路径保存到本地相册。 以下是一个示例代码： ```html <template> <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas> <button @tap="saveImage">保存图片</button> </template> <script> export default { methods: { saveImage() { uni.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => { uni.showToast({ title: '保存成功' }) }, fail: () => { uni.showToast({ title: '保存失败', icon: 'none' }) } }) } }) } }, mounted() { const ctx = uni.createCanvasContext('myCanvas') ctx.fillStyle = '#f00' ctx.fillRect(0, 0, 300, 300) ctx.draw() } } </script> ``` 在上述代码中，我们首先在 template 中定义了一个 canvas 组件和一个按钮。在 mounted 钩子函数中，我们获取了 CanvasRenderingContext2D 对象并使用 fillRect 方法绘制了一个红色的矩形。在 saveImage 方法中，我们使用 uni.canvasToTempFilePath 接口将 Canvas 画布内容转为临时文件路径，并使用 uni.saveImageToPhotosAlbum 接口将临时文件路径保存到本地相册。最后，我们在保存成功或失败时使用 uni.showToast 接口提示用户。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值