注册登录

1***@qq.com

发布：2020-11-09 18:18
更新：2020-11-14 16:23
阅读：4235

【报Bug】uni.canvasToTempFilePath报错无法保存到图片

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 10.15.7

HBuilderX类型：正式

HBuilderX版本号： 2.9.7

手机系统： Android

手机系统版本号： Android 10

手机厂商：华为

手机机型： mate30

页面类型： vue

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

代码

                uni.chooseImage({  
                    count: 1,  
                    sizeType: ['compressed'],  
                    sourceType: ['camera'],  
                    success: async function(res) {  
                        let imgInfo = await _this.getImageInfo({  
                            imgSrc: res.tempFilePaths[0]  
                        })  
                        console.log(imgInfo.path)  
                        _this.canvasView.canvasImg = imgInfo.path  
                        _this.canvasView.width = imgInfo.width  
                        _this.canvasView.height = imgInfo.height  
                        _this.canvasShow = true  
                    },  
                });  
                this.ctx.draw(false, (ret) => {  
                    this.getNewImage(CanvasID, this.canvasW, this.canvasH);  
                });  

                                var _this = this  
                uni.canvasToTempFilePath({  
                    canvasId: CanvasID,  
                    quality: 0.6,  
                    fileType: 'jpg',  
                    destWidth: width,  
                    destHeight: height,  
                    success: (res) => {  
                        _this.$emit('imgWaterInfo', _this.waterInfo)  
                        _this.$emit('imgPath', res.tempFilePath)  
                        uni.hideLoading()  
                    },  
                    complete:(res) =>{  
                        console.log(res)  
                    }  
                }, this);

预期结果：

uni.canvasToTempFilePath正常输出

实际结果：

uni.canvasToTempFilePath报错

bug描述：

方法uni.canvasToTempFilePath
报错
"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
之前看hx更新日志解决的是iOS平台但是我这里iOS没有出现这个问题都是出现在安卓华为手机,而且手机之前EMUI10版本的时候没有出现,看论坛说是Android system webview版本的问题,现在我升级到EMUI11版本,出现了报错问题

2020-11-09 18:18 负责人:无分享

4 个回复

DCloud_UNI_GSQ

看一下emui的具体版本号
看一下软件列表里（需要取消隐藏系统应用）webview的版本号
canvas上绘制的图片路径也提供一下

Yitind

能看一下我的反馈吗

2020-11-10 10:39
DCloud_UNI_GSQ

回复 Yitind: 能看下我的回复吗？

2020-11-10 10:45
1***@qq.com (作者)

回复 DCloud_UNI_GSQ:

1.emui 11.0.0.145(C00E145R5P11)

2.Huawei WebView 10.0.0.311

3.不是太懂你说的是我上面代码添加的那个拍照后传给canvas的吗那里的log后面地址是

/doc/uniapp_temp_1604977570645/compressed/1604977581109_1604977576362.jpg

2020-11-10 11:11
Yitind

回复 1***@qq.com: 和你遇到问题一样....

2020-11-10 11:46
chenli

回复 1***@qq.com: emui 11 是Android 11了吧？

2020-11-10 17:58
1***@qq.com (作者)

回复 chenli: 安卓10

2020-11-10 18:23

ijiangruyi - mind.lingyun.net

canvas里如果图片跨域，会报这个错，需要把图片转为base64

1***@qq.com (作者)

是给canvas的图片转成base64吧我这样做不行同样的报错

2020-11-11 19:53

DCloud_UNI_GSQ

目前已确认华为新版系统webview绘制本地图片有跨域问题，后续会进行修复，临时解决办法是使用插件市场的插件转换为base64

1***@qq.com (作者)

能说一下怎么做吗,目前我把传给canvas的图片,使用了base64转换. 画布的.draw可以返回,但是canvasToTempFilePath方法还是报同样的错

2020-11-11 18:29
DCloud_UNI_GSQ

回复 1***@qq.com: 你应该还是有直接使用本地路径的地方，仔细检查

2020-11-12 18:49
1***@qq.com (作者)

回复 1***@qq.com: 我拍完照直接转base64 然后传给canvas并打开结果还是一样的

2020-11-13 21:14
DCloud_UNI_GSQ

回复 1***@qq.com: 新建个示例工程提供一下

2020-11-14 14:32
愿随风丶飘雪

我也遇到了相同的问题,正式版什么时候出呢

2020-12-12 00:20

DCloud_UNI_GSQ

HBuilderX 2.9.9 alpha 已修复

1***@qq.com (作者)

经测试,问题已修复,请问这次的alpha版本啥时候能转正, 用alpha版本打包的话是否推荐呢

2020-11-14 17:21
我是一个小学生

原生h5是不是还有问题

function getBase64Image(img){

var size = img.width / img.height;

var x = 1300,y = x/size; //设置像素

var imags = new Image();

imags.src = img.src;

var canvas=document.createElement("canvas");

canvas.width = x;//设置画布的长宽高

canvas.height = y;

var ctx = canvas.getContext('2d');

ctx.drawImage(imags,0,0,img.width,img.height,0,0,x,y);//截取缩小图片
```
            var cropStr = canvas.toDataURL("image/jpeg",0.4);//设置图片质量输出base64编码  

            return  cropStr;  

        }  
```
还是提示跨域问题

2020-11-16 18:07
DCloud_UNI_GSQ

回复 1***@qq.com: 推荐

2020-11-17 14:31
1***@163.com

所有手机的webview的H5端都绘制有问题，请跟进修复下：

https://ask.dcloud.net.cn/question/111276?notification_id-836719rf-falseitem_id-146424__answer_id-146424__single-TRUE#!answer_146424

2020-11-26 11:59
3***@qq.com

你好，就是我用最新的3.14 alpha打包，这个问题还是在华为高端机(mate40 pro 或者p40)上会出问题呢，这问题并没有解决啊，其它手机都没问题，怎么解决啊

2021-03-15 15:53
DCloud_UNI_GSQ

回复 3***@qq.com: 详细描述一下你遇到的问题

2021-03-15 16:03
3***@qq.com

回复 DCloud_UNI_GSQ: 就是我再mate 40 pro中上传图片的时候，报错

"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."。我这边本地打包是通过H-builder alpha 3.1.4；然后EMUI为11.0.0

2021-03-15 16:41
3***@qq.com

回复 3***@qq.com: 回复 DCloud_UNI_GSQ: 然后我用其它手机不会报这个错，你之前的回复说的是2.9.9 alpha解决了这个问题但是我用3.1.4 alpha还是会继续报错

2021-03-15 16:43
DCloud_UNI_GSQ

回复 3***@qq.com: 本地打包？你直接运行到基座是否正常？

2021-03-15 17:09
3***@qq.com

回复 DCloud_UNI_GSQ: 是的使用的原生app本地打包生成本地app资源，然后在android studio打包成apk，在非华为高端机(mate 40pro等)中uni.canvasToTempFilePath上传图片都是正常的

2021-03-15 17:17
3***@qq.com

回复 DCloud_UNI_GSQ: 或者我不打包成apk，直接用华为mate40 pro真机通过usb调试。点击android studio的运行安装app也会uni.canvasToTempFilePath 报错canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

2021-03-15 17:20
DCloud_UNI_GSQ

回复 DCloud_UNI_GSQ: 你是不是离线 sdk 没更新

2021-03-15 17:42
3***@qq.com

回复 DCloud_UNI_GSQ: 你说的这个离线sdk是安卓的还是H-builderX的，反正我的H-builderX是检查更新是最新的

2021-03-16 09:04
3***@qq.com

回复 DCloud_UNI_GSQ: 编译器版本：2.9.3（v3）是不是因为编译器版本2.9.3的原因额

2021-03-16 10:45
DCloud_UNI_GSQ

回复 3***@qq.com: 是，更新

2021-03-17 14:12
3***@qq.com

回复 DCloud_UNI_GSQ: 为什么我H-builderX 是最新版本打包的编译器版本会是2.9.3呢

2021-03-17 17:17
DCloud_UNI_GSQ

回复 3***@qq.com: cli 创建的？如果是的话，参考文档更新版本和 HBuilderX 一致

2021-03-18 14:24
3***@qq.com

回复 DCloud_UNI_GSQ: ok

2021-03-18 17:25

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

【报Bug】uni.canvasToTempFilePath报错无法保存到图片

预期结果：

uni.canvasToTempFilePath正常输出

实际结果：

uni.canvasToTempFilePath报错

bug描述：

4 个回复

公告

相关问题

【报Bug】uni.canvasToTempFilePath报错 无法保存到图片

预期结果： uni.canvasToTempFilePath正常输出

实际结果： uni.canvasToTempFilePath报错

bug描述：

与内容相关的链接

4 个回复

公告

相关问题

【报Bug】uni.canvasToTempFilePath报错无法保存到图片

预期结果：

uni.canvasToTempFilePath正常输出

实际结果：

uni.canvasToTempFilePath报错