DOM Exception 18 getImageData

Question

I've run into an error that a lot of people seem to have gotten in the past but the explanations are not clear to me. After using the .getImageData() method in my javascript to get the pixel data of a picture that I have stored on my computer and inputed into an img tag in my HTML webpage I get the SecurityError: DOM Exception 18.

I'm simply running an HTMl file in my browser and it is preventing me from getting this stuff done. I've read about making a proxy to get around it or something or hosting the image on my own domain. I don't exactly understand what this means or how to go about doing it. So, it'd be greatly appreciated if anyone could help. I'll input my code here and leave a link to the image as well.

https://i.stack.imgur.com/RXrqr.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test</title>

    <script>
        function putimg() {

            var img = document.getElementById('img');
            var can = document.getElementById('C');
            var ctx = can.getContext('2d');
            ctx.drawImage(img, 0, 0);


            var position = [];
            var imgdata = ctx.getImageData(0,0, img.width, img.height);
            var data = imgdata.data;
             for (var i = 0; i < data.length; i += 4) {
                if (data[i] == 255) {
                    var vertical = Math.floor((data.indexOf(data[i]) / 4) / 400);
                    var horizontal = Math.floor((data.indexOf(data[i]) / 4) % 400);

                    position.push(horizontal, vertical);
                }
            }

            }

            ctx.putImageData(imgdata, 0, 0);
        }
        </script>
</head>

<body onload="putimg()">
    <h1>Test</h1>

    <img id="img" src="circle-image-alone.png" style="display:none"></img>
    <canvas id="C" width="600" height="600"></canvas>

</body>
</html>

EDIT: the file is now in the same folder as the html file, but the same error flag appears

score 1 · Answer 1 · answered Jul 23 '13 at 16:56

1

The problem is that this is breaking Same-origin policy. You need to either have imgur relax their Cross-origin sharing or host the image yourself.

If you are running the HTML file directly from the file system on your computer then you can just download the image to the same folder as your html file is in, and reference it like

<img id="img" src="8UzWlWX.png" style="display:none"></img>

Here are the hoops you need to jump through to make it work through a foreign origin like imgur: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

answered Jul 23 '13 at 16:56

Esailija

138,174
23
272
326

I got the photo from an email that was sent to me. Then I downloaded the file to my computer. But that still gives me the error message. – user2517142 Jul 23 '13 at 17:24
@user2517142 Yeah sorry it seems that using html files directly with file system cannot do this. You need to host a server locally on your computer and access it like a real website. Well I think there are some flags for Google Chrome to relax this though http://stackoverflow.com/q/4270999/995876 – Esailija Jul 23 '13 at 17:29

score 0 · Answer 2 · answered Jul 23 '13 at 17:45

As you've discovered, your browser considers even your local file system to be a different domain.

So you’re still violating cross-domain even if your image and .html are in the same local directory.

You need a CORS compliant way of loading your image.

Here’s how:

Open up an account on dropbox.com and host your image there.

Be sure to put your image in the “public” folder they set up for you.

They allow cross-domain downloading of their images from your “public” folder.

To get the URL of your dropbox image:

Right-click the image in your public folder and select “copy public link”.

This will put the url into your clipboard where you can paste it into your code.

Then use this code to download your image into the browser in a CORS compliant way:

// download an image from dropbox.com
// in a CORS compliant way

var img=new Image();
img.onload=function(){
    ctx.drawImage(img, 0, 0);
}
img.crossOrigin="anonymous";
img.src="dropbox.com/yourDropboxAccount/yourImage.png";

The result is an image that you can fully examine/change/save with:

ctx.getImageData
ctx.putImageData
ctx.toDataURL.

DOM Exception 18 getImageData

2 Answers2