gpt4 book ai didi

javascript - 为什么当我尝试获取具有 Access-Control-Allow-Origin : * in the response header? 的图像的图像数据时出现异常 18

转载 作者:行者123 更新时间:2023-11-29 22:14:08 24 4
gpt4 key购买 nike

当我试图通过getImageData方法获取图像的像素时,出现了这个错误

"Unable to get image data from canvas because the canvas has been tainted by cross-origin data. Uncaught Error: SecurityError: DOM Exception 18"

图像在 header 响应中具有 Access-Control-Allow-Origin: *。所以,我不明白为什么会出现这个错误。我需要做什么来解决这个问题?

我尝试将属性 crossOrigin 添加到图像,但这在 Safari 中不起作用。我正在处理的代码如下。

<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var img = new Image();
img.onload = function() {
var ctx = $('#cnv')[0].getContext('2d');
ctx.drawImage(this, 0, 0);
var originalImageData = ctx.getImageData(0, 0, 300, 300); // Exception 18
};
img.src = 'http://api.thumbr.it/1f86404a001828912f295a74b8a4d337/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebrown-eframe1/thumb.jpg';
$('body').append(img);
</script>
</head>
<body>
<h1>Example</h1>
<img class="image" id="img-rara" src="http://api.thumbr.it/f4414f15f6d6d2639a17c6e1c025d970/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebarcelona-eframe1/thumb.jpg" />
<canvas id="cnv" width="711" height="400" />
</body>
</html>

最佳答案

在客户端,确保在设置 img.src 之前设置 crossOrigin 标志

img.crossOrigin='anonymous' 

这是将跨源访问设置为匿名的代码:

<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var img = new Image();
img.onload = function() {
var ctx = $('#cnv')[0].getContext('2d');
ctx.drawImage(this, 0, 0);
var originalImageData = ctx.getImageData(0, 0, 300, 300); // Exception 18
};

// allow cross-origin access
img.crossOrigin='anonymous'

img.src = 'http://api.thumbr.it/1f86404a001828912f295a74b8a4d337/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebrown-eframe1/thumb.jpg';
$('body').append(img);
</script>
</head>
<body>
<h1>Example</h1>
<img class="image" id="img-rara" src="http://api.thumbr.it/f4414f15f6d6d2639a17c6e1c025d970/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebarcelona-eframe1/thumb.jpg" />
<canvas id="cnv" width="711" height="400" />
</body>
</html>

关于javascript - 为什么当我尝试获取具有 Access-Control-Allow-Origin : * in the response header? 的图像的图像数据时出现异常 18,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16238059/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com