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?

问题

When I try to get the pixels of an image through the method getImageData, I've got this error

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

The image has Access-Control-Allow-Origin: * in the header response. So, I don't understand why I got this error. What I have to do to solve this problem?.

I've tried to add the attribute crossOrigin to the image, but this does not work in Safari. The code I am working on is below.

<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>

回答1:

On the client-side, be sure to set the crossOrigin flag before setting the img.src

img.crossOrigin='anonymous'

Here's your code with crossorigin access set to 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>

回答2:

I have found another way to solve this problem through XMLHttpRequest. This solution is valid for Chrome, Safari, Firefox, and Opera but not in IE. Visit this page http://jsperf.com/encoding-xhr-image-data/12 for more information.

<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>

来源：https://stackoverflow.com/questions/16238059/why-i-get-an-exception-18-when-i-try-to-get-the-image-data-of-an-image-with-acce

标签

javascript

jquery

canvas

cors