【微信小程序】canvasToTempFilePath遇到的问题

在微信小程序开发中，经常需要将绘制好的canvas保存到本地，这就需要调用canvasToTempFilePath将canvas画布转为本地临时文件。遇到过的问题如下：
1.create bitmap failed
2.fail canvas is empty

这个问题就是canvas还没画为空拿不到转化的临时路径

跟上述问题一样，我在开发过程中也遇到过拿到了tempFilePath临时路径，但是展示不出来。

原因：调取 wx.canvasToTempFilePath 接口获取不到canvas
（1）检查canvasId是否对应
canvas控件中用到的跟canvasToTempFilePath用到的canvasId要一致
（2）检查canvas画布是否被隐藏
可能在canvas画布上用到了hidden属性用来隐藏画布
可以让画布的位置在屏幕之外

<canvas canvas-id='canvasId' style="width: {{ cWidth }}px; height: {{ cHeight }}px;position: absolute;left: -1000rpx;top: -1000rpx;"></canvas>

（3）检查wx.canvasToTempFilePath方法是否在draw()的回调里面
注意：因为draw的回调函数是异步的，在调用canvasToTempFilePath方法时可能图片还没有生成完，所以要适当的加一些时间延迟。多次尝试ios手机可不加定时器，安卓手机基本上都要加，延迟的时间跟手机的性能有关，性能较弱的安卓机出现问题的概率比较大，延迟的时间试过200还是会偶现问题，设置为500基本有效。

var ctx = wx.createCanvasContext('canvasId')
ctx.drawImage(rep.path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false,setTimeout(() => {wx.canvasToTempFilePath({canvasId: 'canvasId',fileType: 'jpg',success(res) {console.log(res.tempFilePath);},fail(error) {console.log(error);}})
},500));

（4）检查是否在自定义组件中使用，如果是则要传入当前组件实例的this

//绘制图片
let that = this
var ctx = wx.createCanvasContext('canvasId',that)
ctx.drawImage(rep.path, 0, 0, canvasWidth, canvasHeight);
ctx.draw(false,setTimeout(() => {wx.canvasToTempFilePath({canvasId: 'canvasId',fileType: 'jpg',success(res) {console.log(res.tempFilePath);},fail(error) {console.log(error);}},that)
},500));

【微信小程序】canvasToTempFilePath遇到的问题相关推荐

uni.canvasToTempFilePath在app正常，微信小程序报错: fail canvas is empty
问题描述: 在微信小程序使用uni.canvasToTempFilePath,画布可以画出图像,但是生成图片临时路径报错:fail canvas is empty . 问题分析: uni.canvas ...
微信小程序wx.canvasToTempFilePath压缩上传图片，ios压缩成功但是数据sm2加密后无法发起请求，安卓一切正常
问题以及解决: 吐槽遇到的问题~ 在写微信小程序的时候,采用wx.canvasToTempFilePath压缩图片且上传的时候,安卓一切正常,我在开发工具上也一切正常,偏偏ios上就不正常,不正常不是 ...
【微信小程序之画布】终：手指触摸画板实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先看效果图: wxml <!--pages/shouxieban/shouxieban.wxml ...
微信小程序开发遇到的那些“坑”（1.2.0-1.4.0）
为什么80%的码农都做不了架构师?>>> 微信小程序基础库版本 1.2.0-1.4.0 为基础,进行总结: 1.css的值是 0 用 0 或者 0px 不要用 0rpx(0p ...
微信小程序之生成图片保存到相册
微信小程序之生成图片保存到相册需求概要电商项目中需要将自己小店的商品带上自己的小程序码生成海报,保存到本地,然后分享到万能的朋友圈,QQ空间,微博等等来广而告之- 如下图,三种海报格式轮播展示,左 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序研发问题梳理:翻页:下拉:缓存:canvas:富文本:分享
微信小程序研发问题梳理最近鼓捣小程序的时候,着实遇到了一些问题,尽管有些再翻看文档几遍,就能找到答案,但还是要发挥下烂笔头的功效,顺便梳理下. 问题列表登录流程小程序标签页地址无法跳转问题页面 ...
微信小程序常见问题集合（长期更新）
最新更新: 新手跳坑系列:推荐阅读:<二十四>request:fail错误(含https解决方案)(真机预览问题跳坑指南<七十>如何让微信小程序服务类目审核通过跳坑六十九: ...
微信小程序 canvas
测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的ca ...

【微信小程序】canvasToTempFilePath遇到的问题

【微信小程序】canvasToTempFilePath遇到的问题相关推荐

最新文章

热门文章