杰克工作室 发表于 2023-2-23 20:07

快速解决Canvas.toDataURL 图片跨域的问题

如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题:<br />
<br />
【Redirect at origin &#39;http://sub1.xx.com&#39; has been blocked from loading by Cross-Origin Resource Sharing policy: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://sub2.xx.com&#39; is therefore not allowed access.】<br />
<br />
解决方案:<br />
根据错误分析需要在控制头增加&ldquo;Access-Control-Allow-Origin&rdquo;,即允许访问源文件权限,那么我们对这个页面【注意是要输出页面的图片】这样处理:
<pre>
var&nbsp;img&nbsp;=&nbsp;new&nbsp;Image;
img.onload&nbsp;=&nbsp;myLoader;
img.crossOrigin&nbsp;=&nbsp;&#39;anonymous&#39;;&nbsp;//可选值:anonymous,*&nbsp;&nbsp;&nbsp;
img.src&nbsp;=&nbsp;&#39;http://myurl.com/....&#39;;</pre>
<br />
或者是HTML中
<pre>
&lt;img&nbsp;src=&quot;&quot;&nbsp;id=&quot;imgclcd&quot;&nbsp;crossorigin=&quot;anonymous&quot;&gt;</pre>
核心是请求头中包含了 Origin: &quot;anonymous&quot;或&quot;*&quot; 字段,响应头中就会附加上 Access-Control-Allow-Origin: * 字段,问题解决。
页: [1]
查看完整版本: 快速解决Canvas.toDataURL 图片跨域的问题