uni-app uni.canvasToTempFilePath函数不执行回调

uni-app uni.canvasToTempFilePath函数不执行回调

开发环境 版本号 项目创建方式
Windows Windows 10 HBuilderX 
产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.1

浏览器平台：Chrome

浏览器版本：95

## 示例代码：

```javascript
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 160,
height: 160,
destWidth: 160,
destHeight: 160,
fileType: 'jpg',
canvasId: 'myCanvas',
success: (res) => {
  
  console.log('rrrr', res);  

  // 判断回调函数  
  if (typeof callback === 'function') {  

    console.log('aaaaaaaaaaaaaaaa');  

    // 设置新的图片临时路径  
    this.$set(chooseImageRes.tempFilePaths, 0, res.tempFilePath);  

    console.log('chooseImageRes', chooseImageRes);  

    // 回调  
    callback(chooseImageRes, true);  
  }  
},
fail: (err) => {  

  // 判断回调函数  
  if (typeof callback === 'function') {  

    // 设置新的图片临时路径  
    this.$set(chooseImageRes.tempFilePaths, 0, img);  

    // 回调  
    callback(chooseImageRes, false);  
  }  
},
complete: () => {  

  console.log('complete');  

}
});

操作步骤：

创建Canvas，画图，将Canvas绘制成临时文件路径

预期结果：

得到回调结果

实际结果：

回调完全不执行，包括success fail complete都不执行

bug描述：

uni.canvasToTempFilePath函数不执行回调，所有回调都不执行，无论是放到setTimeout里边还是放到ctx.draw的回调中都不执行~


更多关于uni-app uni.canvasToTempFilePath函数不执行回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html

22 回复

未复现此问题，请升级至HBuilder X - 3.2.14-alpha试试

更多关于uni-app uni.canvasToTempFilePath函数不执行回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html


3.2.14.20211112-alpha 和 3.2.12.20211029版本都试过了，还是不行，uni.canvasToTempFilePath不执行任何回调，附件是示例代码，麻烦帮看看什么原因，多谢了~

我这边也遇到这个问题了，但我的原因是canvasId和标签上的canvas-id不一致。。。 不过这不执行失败回调也不报错确实是uniapp的锅。

我新建了项目，把所有没有意义的代码都移除了~ 还是不行，不执行uni.canvasToTempFilePath的回调~ 详见附件的压缩包~ 麻烦看看是否能在您那运行一下这个项目试试看原因，主要不回调也不报错，实在不知道什么原因~ 其实我的目的就是解决uni.chooseImage上传图片会出现旋转的问题，另外，附件的图片是我用来测试的图片，显示器那个图片上传后图片会发生逆时针旋转90度的情况~ 如果有更好的处理uni.chooseImage上传图片旋转的问题的方法您也可以发给我试一下看看，多谢了~

空项目只用uni.canvasToTempFilePath文档内的示例代码，是否能复现你的问题？ 不能的话你可以排除法，排查出来具体你哪一行导致的。

按照你说的，用示例代码做了测试，还是依然不执行~ 附件是相关页面代码，麻烦帮看一下~

或者您是否可以给我一个可以执行的项目，我看一下您那边是怎么写的~

可否给我发一个可以正常跑通的DEMO包？我试试在我机器上是否可以正常运行，我按照你说的方法都试过了，还是不行~

你试下

我看你项目里是直接加了canvas标签的，可以执行回调。我用uni.createCanvasContext函数创建的canvas就不行，这个怎么解？我其实不需要页面显示出来这个canvas，只是用它做一些图片旋转的操作~

API uni.createCanvasContext 并不是创建 canvas 组件，是获取 canvas 组件的上下文 API uni.canvasToTempFilePath 将 canvas 组件保存为一张图片，需要指定在模板中的 canvas-id 如果不想显示 canvas 只是用来处理图片的操作，可以在模板中设置 canvas 的样式 display: none 以隐藏

将模板中的canvas设置为display: none;的话，就取不到canvas元素对象了，报错，width和height为0

大佬，解决了吗？我也遇到这个问题了

有解决吗？ 就是死活不进回调函数

排除下面两个方向 (1)画布有高度 (2)draw 里设置了延时

回复 7***@qq.com: 没解决，改成后端画canvas了

我也遇到了和你一样的问题 找了一天了。。 之前一直报错： getCanvasHandlers is not defined 。。没太注意， 然后我就把canvas 标签删除 重新写了一遍后 发现不会出现这个 ：getCanvasHandlers is not defined 错误了 。。然后就执行了！ 所以我猜测是因为canvas渲染的问题导致uni.canvasToTempFilePath不执行

记得更改微信开发者工具中的调试库版本 位置在： 右上角 详情->本地设置->调试基础库 更改为 2.23.4或更旧的版本

我也遇到了，在demo中，通过uni.chooseImage()选择图片后，通过canvas画出，然后旋转保存。在demo里一切正常，而在项目中就不行。麻了麻了麻了

uni.canvasToTempFilePath函数不执行回调，所有回调都不执行，无论是放到setTimeout里边还是放到ctx.draw的回调中都不执行~

这个有解决吗？一直不行呢

微信小程序开发工具，本地调试库改成以前的版本。比如2.15

根据你的描述，uni.canvasToTempFilePath 回调不执行，这通常与 Canvas 渲染时机有关。以下是几个关键排查点：

  1. Canvas 渲染未完成：确保在调用 uni.canvasToTempFilePath 前，Canvas 内容已绘制完成。建议将函数调用放在 ctx.draw 的 callback 中（H5 端需使用 setTimeout 确保渲染完成）。

  2. Canvas ID 或上下文问题：检查 canvasId 是否正确，且 Canvas 已渲染到 DOM 中。H5 端需确保 Canvas 不是动态创建后立即调用，否则可能获取不到上下文。

  3. H5 端异步限制：H5 端的 uni.canvasToTempFilePath 是异步操作，但若 Canvas 内容为空或未渲染，可能静默失败。可尝试在 setTimeout 中延迟调用（例如 500ms）。

  4. 代码执行顺序：确认 uni.canvasToTempFilePath 调用时，Canvas 已存在且尺寸非零。可在调用前打印 canvasId 对应的 DOM 元素验证。

  5. 版本兼容性：HBuilderX 3.2.1 版本较旧，部分 API 可能存在 bug。建议升级到最新稳定版，或检查官方更新日志中相关修复。

建议调整代码顺序：先确保 Canvas 绘制完成，再调用转换函数。示例：

ctx.draw(false, () => {
  setTimeout(() => {
    uni.canvasToTempFilePath({ ... });
  }, 300);
});
回到顶部