0

I'm trying to find the RGBA value of specific pixels in an image. To do so, i put the image in a canvas, got the canvas context and then used the getImageData method. I get a "The operation is insecure" error.

In an html file i only have a canvas element with "canvas" as id.

I found somewhere that the problem might be with the origin of the file. To be honest i don't really understand what that means but in the thread i read, it was said that changing the crossOrigin to anonymous would fix my problem. It unfortunately didn't.

My Js code :

let canvas = document.getElementById("canvas");
canvas.width = 640;
canvas.height = 480;
let ctx = canvas.getContext("2d");
let img = new Image();
img.src = "image1.bmp";
ctx.drawImage(img, 0, 0, 640, 480);
let imgData = ctx.getImageData(0, 0, 640, 480);

My HTML code :

<!DOCTYPE html>
<html>
<script src="act.js" defer></script>
<head>
<meta charset="utf-8">
<title></title>
</head>
    <body>
        <canvas id="canvas"></canvas>
        <style type="text/css">
            canvas {
                border: 1px solid black;
                width: 640px;
                height: 480px;
            }
        </style>
    </body>
</html>
Seth
  • 1
  • 1
  • _“To be honest i don't really understand what that means”_ — [MDN](//developer.mozilla.org/en/docs/Glossary/Origin), [Wikipedia](//en.wikipedia.org/wiki/Same-origin_policy). – Sebastian Simon Jan 24 '23 at 20:24
  • If the image is from another domain, it has restrictions. Plenty of questions on this top on stackoverflow found with a search. – epascarello Jan 24 '23 at 20:28
  • 1
    where is image1.bmp stored? @epascarello looks like same domain to me – Daniel Resch Jan 24 '23 at 20:30
  • @DanielResch Do we trust code snipplets to mimic real world? ;) – epascarello Jan 24 '23 at 20:32
  • image1.bmp is stored locally and the code snippet is literally the code i ran to get this error – Seth Jan 24 '23 at 20:34
  • So then you need to set the origin https://stackoverflow.com/questions/17035106/context-getimagedata-operation-is-insecure or https://stackoverflow.com/questions/25753754/canvas-todataurl-security-error-the-operation-is-insecure Can you show how you set it? – epascarello Jan 24 '23 at 20:35
  • He already tried that I think @epascarello – Daniel Resch Jan 24 '23 at 20:35
  • @Seth could you post full HTML and full Javascript and maybe also image1.bmp? I have tried your code and was able to read RGBA image data without any problems. Maybe no read access on image1.bmp? – Daniel Resch Jan 24 '23 at 20:50
  • I added the HTML code. for the image, it's simply an bmp image with a resolution of 640x480. – Seth Jan 24 '23 at 21:00
  • 1
    If you are trying to load an image from your local machine into a local html file, you are going to get this error. If you want to be able to do some testing before pushing this to a server, you are either going to need to turn off your CORS policy for your browser or create a local server using node.js, python, or PHP. – Shmack Jan 24 '23 at 21:07
  • I will try to do that. – Seth Jan 24 '23 at 21:17
  • 1
    You should also wait for your image to load before drawing it into the canvas – NobodyImportant Jan 24 '23 at 21:57

0 Answers0