注册登录

m***@163.com

发布：2020-11-03 18:25
更新：2020-12-14 18:49
阅读：912

【报Bug】荣耀V30 pro机型上使用uni.canvasToTempFilePath报错，无法将canvas转换为图片文件（app真机环境）

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Win7 64位

HBuilderX类型： Alpha

HBuilderX版本号： 2.9.6

手机系统： Android

手机系统版本号： Android 10

手机厂商：华为

手机机型： HONOR V30 PRO

页面类型： vue

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

<canvas canvas-id="poster" class="save_qrcode" />

let qrCanvas = uni.createCanvasContext('poster');  
qrCanvas.drawImage('/static/qrCode.png', 0, 0, uni.upx2px(750), uni.upx2px(1334));  
qrCanvas.drawImage(this.codePath, uni.upx2px(162), uni.upx2px(492), uni.upx2px(429), uni.upx2px(429));  
qrCanvas.setTextAlign('center');  
qrCanvas.setFontSize(uni.upx2px(32));  
qrCanvas.fillText(shopName, uni.upx2px(375), uni.upx2px(975));  
qrCanvas.fillText(codeName, uni.upx2px(375), uni.upx2px(1025));  
qrCanvas.draw();

其中this.codePath、shopName、codeName为变量

uni.canvasToTempFilePath({  
            canvasId: 'poster',  
            success: res => {  
                console.log(res)  
                uni.saveImageToPhotosAlbum({  
                    filePath: res.tempFilePath,  
                    success() {  
                        uni.showToast({  
                            title: '已保存到系统相册',  
                            icon: 'none'  
                        });  
                    },  
                    fail(e) {  
                        uni.showToast({  
                            title: '保存失败',  
                            icon: 'none'  
                        });  
                    }  
                });  
            },  
            fail: e => {  
                console.log(e)  
                uni.showToast({  
                    title: '图片导出失败',  
                    icon: 'none'  
                });  
            }  
        });

预期结果：

成功保存至相册

实际结果：

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

bug描述：

在华为荣耀V30 PRO机型上使用uni.createCanvasContext绘制出图片后，再使用uni.canvasToTempFilePath将canvas转换为图片文件，最后使用uni.saveImageToPhotosAlbum将图片保存至本地相册。在使用uni.canvasToTempFilePath转换时候报错：{
"errMsg": "canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
}

2020-11-03 18:25 负责人:无分享

5 个回复

DCloud_UNI_LXH

请问，手机的webview版本是多少？

m***@163.com (作者)

我是直接跑的app真机模式

2020-11-03 18:54
chenli

是不是前几个版本优化了绘制和生成效率，把之前的代码绘制前自动判断远程图片链接下载再绘制的逻辑代码去掉的原因？

2020-11-03 23:53
DCloud_UNI_LXH

回复 m***@163.com: 这种情况一般是canvas跨域绘制图片，报错tainted canvases，但是app端没有跨域现象，所以我问一下手机的webview版本是多少

2020-11-04 10:11
m***@163.com (作者)

回复 DCloud_UNI_LXH: 查看到的webview版本是68.0.3440.106

2020-11-04 10:19

chenli

参考这个贴查看一下出现这个问题手机上的webview版本 https://ask.dcloud.net.cn/question/103303

chenli

this.codePath 这个值是不是远程图片链接，如果是请先下载，拿临时路径再绘制

m***@163.com (作者)

的确是远程的，我先尝试下载试一下

2020-11-04 00:27

W***@126.com - 无极猫

问题解决了吗？我也遇到相同问题

DCloud_UNI_LXH

可以提供一下HX版本，和手机webview版本吗？

如果可以的话，请提供一个简单可复现的demo供我们测试使用

2020-11-09 17:40

5***@qq.com

请问解决了吗？

客户荣耀V30 pro 这个机型

也出现这个错误提示
其他手机不会很郁闷
"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

chenli

hx2.9.9已修复这个问题，可使用hx2.9.9+看看。离线打包，sdk升级2.9.9+

2020-12-15 09:29

该问题目前已经被锁定, 无法添加新回复

【报Bug】荣耀V30 pro机型上使用uni.canvasToTempFilePath报错，无法将canvas转换为图片文件（app真机环境）

预期结果：

成功保存至相册

实际结果：

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

bug描述：

5 个回复

公告

相关问题

【报Bug】荣耀V30 pro机型上使用uni.canvasToTempFilePath报错，无法将canvas转换为图片文件（app真机环境）

预期结果： 成功保存至相册

实际结果： 报错：{ "errMsg": "canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." }

bug描述：

与内容相关的链接

5 个回复

公告

相关问题

预期结果：

成功保存至相册

实际结果：

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