uni-app 鸿蒙系统里 canvasToTempFilePath 报错

uni-app 鸿蒙系统里 canvasToTempFilePath 报错

项目属性 信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.7 (23H124)
HBuilderX类型 Alpha
HBuilderX版本号 4.32
手机系统 HarmonyOS NEXT
手机系统版本号 HarmonyOS NEXT Developer Beta2
手机厂商 华为
手机机型 HarmonyOS NEXT Release
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

  • uni.canvasToTempFilePath()

预期结果:

  • 返回图片的路径

实际结果:

  • 返回错误:canvasToTempFilePath:fail SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

bug描述:

{"errMsg":"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."}

更多关于uni-app 鸿蒙系统里 canvasToTempFilePath 报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

HBuilderX 4.33.2024111702-alpha 已修复。

更多关于uni-app 鸿蒙系统里 canvasToTempFilePath 报错的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


自行在 harmony-config 的 oh-package.json5 中将 runtime 版本改为 2.3.13 重新运行

2.3.13版本下这个问题修正了,谢谢。 能帮忙看看这个问题吗, 在2.3.13还是报错:https://ask.dcloud.net.cn/question/200725

回复 d***@qq.com: 我也遇到了,oh-package.json5没有runtime字段,自行添加吗?

回复 5***@qq.com: 不可以自行添加。你应该使用的是旧的版本,可以将 harmony-config 中必要的配置保存,然后删除,unpackage 也删除。使用 alpha 版 hx 打开,恢复配置,重新运行

回复 DCloud_UNI_LXH: 升级了最新的HBX 4.32,"@dcloudio/uni-app-runtime": “2.3.14”,还是报这个相同的错误,cli创建的项目

回复 DCloud_UNI_LXH: HBX v4.29 除了上面提到的canvas报这个错,鸿蒙uni.getImageInfo 这个不生效,升级了HBX v4.32后,uni.getImageInfo生效了,用这个加载图片后,canvas使用image.path绘制就不报错了

回复 5***@qq.com: cli 创建的项目,升级 cli 的依赖

在处理 uni-app 在鸿蒙系统(HarmonyOS)中使用 canvasToTempFilePath 方法时遇到报错的问题,通常涉及到环境兼容性和API调用的具体实现。由于鸿蒙系统相对其他主流操作系统(如iOS和Android)有其特殊性,某些API调用可能需要额外的适配或替代方案。以下是一个简化的代码示例,展示如何在 uni-app 中使用 canvasToTempFilePath,并包含一些可能的错误处理机制。请注意,由于鸿蒙系统的具体API实现细节可能不同,这里的代码仅供参考,具体实现可能需要调整。

// 假设我们在页面的 onLoad 或其他生命周期函数中初始化 canvas
export default {
    onLoad() {
        const ctx = uni.createCanvasContext('myCanvas');
        ctx.setFillStyle('red');
        ctx.fillRect(0, 0, 300, 300);
        ctx.draw(false, () => {
            // 调用 canvasToTempFilePath 方法
            uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: (res) => {
                    console.log('Canvas saved to temp file:', res.tempFilePath);
                    // 可以使用 res.tempFilePath 做进一步处理,如上传或显示图片
                },
                fail: (err) => {
                    console.error('Failed to save canvas to temp file:', err);
                    // 鸿蒙系统特有的错误处理,可能需要检查特定的错误码
                    if (err.errMsg && err.errMsg.includes('HarmonyOS')) {
                        // 针对鸿蒙系统的特定处理逻辑
                        console.warn('HarmonyOS-specific error encountered.');
                    }
                },
                complete: () => {
                    console.log('Canvas to temp file process completed.');
                }
            });
        });
    }
};

// 页面模板
<template>
    <view>
        <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
    </view>
</template>

在上面的代码中,我们创建了一个简单的 canvas 并绘制了一个红色矩形,然后尝试将其保存为临时文件。canvasToTempFilePath 方法的 fail 回调中包含了针对鸿蒙系统错误的检查逻辑,尽管这里的检查逻辑是基于假设的,因为实际的鸿蒙系统错误码需要查阅相关文档。

由于鸿蒙系统的API可能与标准Web API或微信小程序API有所不同,如果 canvasToTempFilePath 在鸿蒙系统上不可用,你可能需要寻找替代方案,比如使用其他图形库或将绘制内容导出为Base64编码的字符串,再根据需要转换为图片文件。此外,确保你的 uni-app 和相关依赖库已更新到最新版本,以支持更多的系统特性。

回到顶部