我是一个小学生
我是一个小学生
  • 发布:2020-12-01 12:13
  • 更新:2021-02-20 10:37
  • 阅读:764

【报Bug】2.9.8 Failed to execute 'toDataURL' on 'HTMLCanvasElement'

分类:HTML5+

产品分类: HTML5+

HBuilderX版本号: 2.9.8

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: mate30

打包方式: 云端

示例代码:
var a = [{  
    title: "拍照"  
}];  
plus.nativeUI.actionSheet({  
    cancel: "取消",  
        buttons: a  
    }, function(b) {  
       switch(b.index) {  
         case 0:  
            break;  
         case 1:  
            /*---拍照---*/   
            var c = plus.camera.getCamera();  
            var res=c.supportedImageResolutions[0];  
            var fmt=c.supportedImageFormats[0];   
            c.captureImage(function(e) {  
                plus.nativeUI.showWaiting("上传中...",{width:"100px",height:"100px",padlock:true});  
                plus.io.resolveLocalFileSystemURL(e, function(entry) {   
                    var src = entry.toLocalURL();  
                    var img = new Image();  
                    img.src = src;  
                    //图片加载完成  
                    img.onload=function(){  
                        var imgData = getBase64Image(img);   
                        console.log('base64转码后+'+imgData)  
                        var base64=imgData;  
                        //当图片存在,则先上传到服务器,再在页面上显示  
                        if(imgData.length > 0){  
                            //图片保存到  
                            plus.gallery.save(src, function(evt){  
                                console.log('图片保存到本地成功');  
                             });  
                            $.ajax({  
                                type: 'POST',  
                                url:app.config.serverOrigin+"/XX.app?method=XXXXX",  
                                data : {  
                                    imgData :imgData  
                                },  
                                dataType:"json",  
                                success: function(response) {  
                                    var results = response;  
                                    var picId = results.picId;//图片ID  
                                    var message = results.message;//提示语句  
                                    var errCode = results.errCode;//状态码  
                                    if(errCode!=0){  
                                        mui.toast("图片上传失败!");  
                                        return;  
                                    }  
                                    content = "<div class='my-imgdiv' id='pic"+picId+"'>"+  
                                                                                   "<img  data-preview-src='' data-preview-group='1'"+  
                                                                                   "picId='"+picId+"' src='"+imgData+"' class='my-img'/></div>";  

                                    that.before(content);  
                                        $("#"+"div"+picId).hide();  
                                        plus.nativeUI.closeWaiting();//关闭加载框  
                                },  
                                error:function(e){  
                                    console.log("上传失败"+JSON.stringify(e));  
                                    //console.log("xhr="+xhr+"type="+type+"errorThrown="+errorThrown);  
                                    plus.nativeUI.closeWaiting();//关闭加载框  
                                }  
                            });  
                        }  
                    };  
                    }, function(e) {   
                        console.log("读取拍照文件错误:" + e.message);   
                    });   
                }, function(s) {   
                    photoUp=true;  
                    console.log("error" + JSON.stringify(s));   
                }, {   
                    filename: "_doc/myimage/"+(new Date).getTime()+".png",  
                    resolution:res,  
                    format:fmt   
                });  
            break;  
         //case 2:  
         /*---打开相册----*/   
         default:  
            break  
     }  
})  

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;
}

操作步骤:

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;
}

预期结果:

正常显示

实际结果:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

bug描述:

华为EMUI11存在canvas渲染问题,其他手机系统均正常
canvas渲染Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

2020-12-01 12:13 负责人:无 分享
已邀请:
2***@qq.com

2***@qq.com

大哥,你的这个问题解决了吗,我也报这个错,郁闷死了!!!!!

2***@qq.com

2***@qq.com

我使用的是cropper.js裁剪图片以后,调用了toDataURL()方法后,就报了跟你一样的错误,然而我尝试了网上各种关于给图片添加crossOrigin="Anonymous"的方法,都没有任何作用,非常苦恼,兄弟你解决了请务必告知!非常感谢!

  • 老哥教教我

    调用了toDataURL()方法后,就报了跟你一样的错误 这个问题解决了吗?

    2021-06-05 18:38

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