Javascript 为什么我在尝试获取具有Access Control Allow Origin:*的图像的图像数据时出现异常18？_Javascript_Jquery_Canvas_Cors

Javascript 为什么我在尝试获取具有Access Control Allow Origin:*的图像的图像数据时出现异常18？

javascript jquery canvas cors

Javascript 为什么我在尝试获取具有Access Control Allow Origin:*的图像的图像数据时出现异常18？,javascript,jquery,canvas,cors,Javascript,Jquery,Canvas,Cors,当我试图通过getImageData方法获取图像的像素时，我遇到了这个错误 “无法从画布获取图像数据，因为画布已被删除。” 受跨源数据污染。未捕获错误：SecurityError:DOM 例外情况18“ 图像在标题响应中具有访问控制允许原点：。所以，我不明白我为什么会犯这个错误。我该怎么办才能解决这个问题我尝试将属性crossOrigin添加到图像中，但这在Safari中不起作用。下面是我正在编写的代码 <html> <head> <title>Examp

当我试图通过getImageData方法获取图像的像素时，我遇到了这个错误

“无法从画布获取图像数据，因为画布已被删除。” 受跨源数据污染。未捕获错误：SecurityError:DOM 例外情况18“

图像在标题响应中具有访问控制允许原点：。所以，我不明白我为什么会犯这个错误。我该怎么办才能解决这个问题

我尝试将属性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>


例子
var img=新图像（）；
img.onload=函数（）{
var ctx=$（'#cnv'）[0].getContext（'2d'）；
ctx.drawImage（this，0，0）；
var originalImageData=ctx.getImageData（0，0，300，300）；//异常18
};
img.src=http://api.thumbr.it/1f86404a001828912f295a74b8a4d337/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebrown-eframe1/thumb.jpg';
$（'body'）。追加（img）；
例子

在客户端，确保在设置img.src之前设置

交叉原点

标志

img.crossOrigin='anonymous'

以下是您将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>


例子
var img=新图像（）；
img.onload=函数（）{
var ctx=$（'#cnv'）[0].getContext（'2d'）；
ctx.drawImage（this，0，0）；
var originalImageData=ctx.getImageData（0，0，300，300）；//异常18
};
//允许跨源访问
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'）。追加（img）；
例子

我找到了通过XMLHttpRequest解决此问题的另一种方法。此解决方案适用于Chrome、Safari、Firefox和Opera，但不适用于IE。有关更多信息，请访问此页面

<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">
    // See: http://jsperf.com/encoding-xhr-image-data/12
    $('body').ready(function(){
        data = getImageData(
            'http://api.thumbr.it/1f86404a001828912f295a74b8a4d337/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebrown-eframe1/thumb.jpg');
    });
    function getImageData(url) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, false);
        xhr.overrideMimeType('text/plain; charset=x-user-defined');
        xhr.send();

        var img = $('<img>');
        img.attr(
            'src',
            'data:image/' + getType(xhr.responseText.slice(0, 4)) + ';base64,' + getDataBase64(xhr.responseText)
        );
        img.load(function() {
            var ctx = $('#cnv')[0].getContext('2d');
            ctx.drawImage(img[0], 0, 0);
            data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); // Data!!
        });
    }
    function getDataBase64(data) {
        var binary = '';
        for (var i = 0; i < data.length; i+=4) {
            binary += String.fromCharCode(
                data.charCodeAt(i+0) & 0xff,
                data.charCodeAt(i+1) & 0xff,
                data.charCodeAt(i+2) & 0xff,
                data.charCodeAt(i+3) & 0xff
            );
        }
        for (i-=4; i < data.length; i+=1) {
            binary += String.fromCharCode(data.charCodeAt(i) & 0xff);
        }
        return window.btoa(binary);
    }
    function getType(data) {
        if (data.search('PNG') >= 0) {
            return 'png';
        } else if (data.search('GIF') >= 0) {
            return 'gif';
        } else {
            return 'jpeg';
        }
    }
</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="400" height="400" />
</body>
</html>


例子
//见：http://jsperf.com/encoding-xhr-image-data/12
$（'body'）.ready（函数（）{
data=getImageData(
'http://api.thumbr.it/1f86404a001828912f295a74b8a4d337/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebrown-eframe1/thumb.jpg');
});
函数getImageData（url）{
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，url，false）；
xhr.overrideMimeType（'text/plain；charset=x-user-defined'）；
xhr.send（）；
变量img=$（'=0）{
返回‘png’；
}else if（data.search（'GIF'）>=0）{
返回'gif'；
}否则{
返回“jpeg”；
}
}
例子

crossOrigin属性在Chrome和Firefox等浏览器中有效，但在Safari中不起作用。所以你知道获取图像数据的另一种方法吗？非常感谢。好吧，这有点骇人……但是您可以将图像url包装在jsonP请求中，并将其从服务器上弹回。由于它以json的形式返回，跨源代码警察忽略了它。如果您没有时间进行配置，这里有一个lib可以为您进行配置：