为什么我得到一个例外18当我试图获得一个图像的访问-控制-允许-原点:*在响应头的图像数据

Why I get an Exception 18 when I try to get the image data of an Image with Access-Control-Allow-Origin: * in the response header?

本文关键字：一个 图像 允许 控制 原点 数据 响应 为什么 访问      更新时间：2023-09-26

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

"无法从画布获取图像数据，因为画布已被被跨域数据污染。未捕获错误:SecurityError: DOM异常18 "

图片在报头响应中有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>

我找到了另一种通过XMLHttpRequest解决这个问题的方法。此解决方案适用于Chrome, Safari, Firefox和Opera，但不适用于IE。请访问此页面http://jsperf.com/encoding-xhr-image-data/12获取更多信息。

<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>
相关文章：