寒山之北
寒山之北
  • 发布:2018-06-19 10:35
  • 更新:2020-12-12 19:04
  • 阅读:4175

canvas.toDataURL方法报错,跨域异常?

分类:HTML5+

近期一个项目需要在APP端上传图片至web服务端
看网上的常用方案一般是把图片做base64编码,之后通过ajax异步上传;
图片编码部分参考网上例子使用如下方法,
但在调用“var dataUrl=canvas.toDataURL('image/png');”时报错,
异常信息为“Uncaught Error: SECURITY_ERR: DOM Exception 18”
上传图片为手机拍照后生成的本地文件
file:///storage/sdcard0/Android/data/io.dcloud.HBuilder/apps/HBuilder/www/images/15285422321.jpg

查了很多资料说是canvas不允许跨域导致的,有人说需要配置 image.crossOrigin = 'anonymous';但是我这边尝试了没有效果,小弟新手,特来向各位大大请教,万望赐教!

另:小弟首次提问,有何不当之处请指正。

    //压缩图片转成base64  
    function getBase64Image(img){  

        var canvas=document.createElement("canvas");  
        var width=img.width;  
        var height=img.height;  
        if(width>height){  
            if(width>100){  
                height=Math.round(height*=100/width);  
                width=100;  
            }  
        }else{  
            if(height>100){  
                width=Math.round(width*=100/height);  
            }  
            height=100;  
        }  

        canvas.width=width;  
        canvas.height=height;  
        var ctx=canvas.getContext('2d');  
        ctx.clearRect(0, 0, width, height);  
        ctx.drawImage(img, 0, 0, width, height);  

        var dataUrl=canvas.toDataURL('image/png');  
        alert(dataUrl)  
        return dataUrl.replace('data:image/png;base64,','');  
    }   
2018-06-19 10:35 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com

问题处理了嘛。???我也遇到这个问题

DCloud_UNI_GSQ

DCloud_UNI_GSQ

如果canvas使用网络图像遇到跨域问题,需要服务端设置图像的响应头:Access-Control-Allow-Origin
如果canvas使用本地图像遇到跨域问题,可以使用plus接口将图像转换为base64再使用,相关插件:https://ext.dcloud.net.cn/plugin?id=123

  • 4***@qq.com

    我也遇到这个问题,app端开发canvas.toDataURL直接报错,控制台只显示14:42:02.051 Script error.

    14:42:02.072 filename:

    14:42:02.093 lineno:0,这是啥原因?

    2019-12-20 14:43

  • DCloud_UNI_GSQ

    回复 4***@qq.com: 如果canvas使用网络图像遇到跨域问题,需要服务端设置图像的响应头:Access-Control-Allow-Origin

    如果canvas使用本地图像遇到跨域问题,可以使用plus接口将图像转换为base64再使用,相关插件:https://ext.dcloud.net.cn/plugin?id=123

    2019-12-20 15:03

  • 守护

    回复 DCloud_UNI_GSQ: 5+app 不能使用https://ext.dcloud.net.cn/plugin?id=123这个插件,如何改写canvas.toDataURL方法?

    2020-02-20 12:24

  • 守护

    回复 DCloud_UNI_GSQ: plus的哪个接口可以将canvas图像转换为base64?

    2020-02-20 12:50

  • DCloud_UNI_GSQ

    回复 守护: 可参考插件代码

    2020-02-25 18:11

  • 5***@qq.com

    回复 守护: 大佬, 解决了吗?我也遇到这问题了

    2020-04-17 15:56

愿随风丶飘雪

愿随风丶飘雪 - 勿在浮沙筑高台

遇到了相同的问题

愿随风丶飘雪

愿随风丶飘雪 - 勿在浮沙筑高台

最后使用了plus.zip.compressImage的压缩方法,放弃了canvas压缩

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