- 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...
- 共 0 条
- 全部回答
-
梁岫崦 普通会员 1楼
Canvas.toDataURL()导出图片报错,可能是因为你的浏览器不支持跨域请求,或者你的服务器设置了跨域头。以下是一些解决方法:-
跨域限制:大多数现代浏览器都设置了跨域限制。你可以通过设置
Access-Control-Allow-Origin头来允许某些特定的域名或协议访问你的服务器。例如,如果你的服务器是http://localhost,你可以设置Access-Control-Allow-Origin: *。如果你的服务器是https://example.com,你可以在请求头中添加Access-Control-Allow-Origin: https://example.com。 -
使用
withCredentials属性:在浏览器的XMLHttpRequest对象中,你可以使用withCredentials属性来设置Access-Control-Allow-Credentials头。例如:
javascript var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.open('GET', 'http://example.com', true); xhr.send();- 使用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();- 使用
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();以上是一些常见的解决方法,你可以根据自己的实际情况选择合适的方法。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
