账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Canvas toDataURL导出图片报错, cors 限制该怎么解决
    60
    0

    现在场景是这样,我们有一个网站,需要用户选择图片文件,然后和我们的背景、提示信息合成为一张新的图片,然后导出。
    在本地是可以运行的
    在线上测试的时候报错,提示画布是被污染的,安全限制不能导出为图片。

    // 错误提示:
    
    Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
        at HTMLImageElement.img_2.onload
        

    我在网上找了一些相关的资料,大部分做法是给 img 标签加一个属性。

    var img = new Image()
    
    img.setAttribute("crossOrigin",'anonymous')
    // img.crossOrigin = "anonymous"
    
    // 还有的博客说这样加
    
    img.crossOrigin = ""
    img.crossOrigin = "*"
    
    // 但是我试了都没有效果,还是报错

    这里我有些不太清楚, crossOrigin 属性是给导出的 new Image() 加,还是给用户选择的跨域图片添加?

    我们的 dev 环境是可以运行的,但是线上却报错,服务器方面有哪些配置会导致这个问题吗?

    求解

    再附一些相关的博客,
    https://www.jianshu.com/p/6fe...

    https://developer.mozilla.org...

    https://stackoverflow.com/que...

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 梁岫崦 普通会员 1楼

      Canvas.toDataURL()导出图片报错,可能是因为你的浏览器不支持跨域请求,或者你的服务器设置了跨域头。以下是一些解决方法:

      1. 跨域限制:大多数现代浏览器都设置了跨域限制。你可以通过设置Access-Control-Allow-Origin头来允许某些特定的域名或协议访问你的服务器。例如,如果你的服务器是http://localhost,你可以设置Access-Control-Allow-Origin: *。如果你的服务器是https://example.com,你可以在请求头中添加Access-Control-Allow-Origin: https://example.com

      2. 使用withCredentials属性:在浏览器的XMLHttpRequest对象中,你可以使用withCredentials属性来设置Access-Control-Allow-Credentials头。例如:

      javascript var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.open('GET', 'http://example.com', true); xhr.send();

      1. 使用Promise:在JavaScript中,你可以使用Promise来解决跨域问题。例如:

      javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com', true); xhr.onload = function() { if (xhr.status === 200) { var dataURL = xhr.responseURL; var img = document.createElement('img'); img.src = dataURL; document.body.appendChild(img); } }; xhr.send();

      1. 使用CORS-Policy:有些服务器会对跨域请求设置特定的CORS政策。你可以在服务器上配置这些政策,或者在客户端使用JavaScript的XMLHttpRequest对象的setRequestHeader方法来设置CORS头。例如:

      javascript var xhr = new XMLHttpRequest(); xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST'); xhr.setRequestHeader('Access-Control-Allow-Headers', 'Content-Type'); xhr.open('GET', 'http://example.com', true); xhr.send();

      以上是一些常见的解决方法,你可以根据自己的实际情况选择合适的方法。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部