0

I am trying to write some code that combines two images into a resultant image and display the combined data in a canvas element. I have two images loaded on the page from my local machine. I then create two new canvas elements to draw these images onto and then take the data from those elements for combination into the canvas on the page itself.

However, I am getting this error:

SecurityError: The operation is insecure.

I have looked at a few questions here on SO, such as SecurityError: The operation is insecure. using Htmlcanvas, but I can't see why this is happening when everything is on my local machine. There's no CORS request being made that I'm aware of.

Here's my code so far that isn't working as I expect:

<!DOCTYPE html>
<html>
    <head>
        <title>Image Mix Test</title>
        <meta charset="UTF-8">
        <script>
            function init(event) {
                console.log('init');
                var img1 = document.getElementById('img1');
                var img2 = document.getElementById('img2');
                var canvas1 = document.createElement('canvas');
                var canvas2 = document.createElement('canvas');
                canvas1.width = img1.width;
                canvas1.height = img1.height;
                canvas2.width = img2.width;
                canvas2.height = img2.height;
                var ctx1 = canvas1.getContext('2d');
                var ctx2 = canvas2.getContext('2d');
                ctx1.drawImage(img1, 0, 0, ctx1.canvas.width, ctx1.canvas.height);
                ctx2.drawImage(img2, 0, 0, ctx2.canvas.width, ctx2.canvas.height);
                console.log(ctx1);
                console.log(ctx2);

                // *** The error is thrown on this next line... ***
                var data1 = ctx1.getImageData(0, 0, ctx1.canvas.width, ctx1.canvas.height);
                var data2 = ctx2.getImageData(0, 0, ctx2.canvas.width, ctx2.canvas.height);

                // TODO: write code that combines image data.
            }

            window.addEventListener('load', init, false);
        </script>
    </head>
    <body>
        <img id="img1" src="../default/assets/images/Tile01.jpg" style="display:block;"><br>
        <img id="img2" src="../default/assets/images/Tile03.jpg" style="display:block;"><br>
        <canvas id="canvas"></canvas>
    </body>
</html>

Any thoughts on why this is happening and how to correct it?

Community
  • 1
  • 1
ManoDestra
  • 6,325
  • 6
  • 26
  • 50
  • Local (`file://`) URLs are all considered to be relatively insecure to each other. It's to prevent fishy things like `README.html` files from stealing content from your machine. – Pointy Jun 18 '16 at 18:59
  • 2
    If you host your code with some local *web server* however things will work. – Pointy Jun 18 '16 at 18:59
  • 1
    Are you in localhost by http protocol or are you in a file:// protocol? – Marcos Pérez Gude Jun 18 '16 at 19:00
  • So, if I just host this on IIS or Tomcat and put the images in the same folder or a subfolder of the web files, it should be fine, right? – ManoDestra Jun 18 '16 at 19:00
  • Yeah, file:/// protocol on local machine. – ManoDestra Jun 18 '16 at 19:01
  • Ah, I moved my image files into the same directory and it removed the error. It obviously doesn't like the relative URL for those images coming from a folder outside of the context of the HTML file. Thanks for your assistance with this :) – ManoDestra Jun 18 '16 at 19:07
  • 1
    @ManoDestra. Glad you got it sorted ... And the reason it doesn't serve up un-served local files is that most of your most sensitive info is in those local files. – markE Jun 18 '16 at 19:10
  • 1
    @markE Thanks. Appreciate the assist. Schoolboy error on my part. – ManoDestra Jun 18 '16 at 19:13
  • Not a dupe of that question. Not the same issue. Not Chrome related and it's not a CORS violation (as such), but an issue with the relative path appearing to go "outside" the web (current directory and below), even though all files are on the local machine. Rectified by ensuring that any referenced assets are local to the directory or below. – ManoDestra Jun 19 '16 at 04:51

1 Answers1

1

I managed to resolve this issue by copying the image files I was trying to refer to outside of the directory of the HTML file. So, now my image URLs are simply src="Tile01.jpg" and src="Tile03.jpg".

I was trying to reuse images from another directory above and then below my current level. It clear thinks that this is from a seperate web, as I'm using the file:/// protocol to view the file.

ManoDestra
  • 6,325
  • 6
  • 26
  • 50