Modify pixels in remote image in plain html/js

Question

I am new to Javascript, I would like to modify the brightness of any remote image given in an input form.
I have tried to use Canvas but I got this issue. I want the following code to work directly via "file:///test.html". How can I simply achieve that ?

<html>
<head>
  <script type="text/javascript">
  function readImg() {
    img = new Image();
    url = document.getElementById('url').value;
    document.getElementById('showImg').innerHTML='<img src="'+ url +'" />';
    img.src = url;
    canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    img.crossOrigin = "Anonymous";
    imgData = ctx.getImageData(0,0,canvas.width,canvas.height); // not working !!
    brightness(imgData);

  }

    function brightness(imgData) {
      var dataimg = imgData.data;
      for (var i = 0; i < dataimg.size; i += 4 ) {
        dataimg[i] += 10;
        dataimg[i+1] += 10;
        dataimg[i+2] += 10;
      }
    }
  </script>
</head>
<body>
<input id="url" type="text" onChange="readImg()"></input>
<div id='showImg'></div>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 11:44

You have to give Chrome explicit access to local files from local html files. You have to run Chrome with --allow-file-access-from-files flag.

"C:\PathTo\Chrome.exe" --allow-file-access-from-files

You can find more info about it here as it was already discussed: https://stackoverflow.com/a/18587027/4103991

@EDIT:// Execute commands related to img element inside img.onload event handler. Your code should look somewhat like that:

<html>
<head>
  <script type="text/javascript">
  function readImg() {
    img = new Image();
    url = document.getElementById('url').value;

    document.getElementById('showImg').innerHTML='<img src="'+ url +'" />';
    canvas = document.createElement("canvas");
    img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;

        ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
        brightness(imgData);
    }

    img.src = url;
    img.crossOrigin = "Anonymous";
  }

    function brightness(imgData) {
      var dataimg = imgData.data;
      for (var i = 0; i < dataimg.size; i += 4 ) {
        dataimg[i] += 10;
        dataimg[i+1] += 10;
        dataimg[i+2] += 10;
      }
    }
  </script>
</head>
<body>
<input id="url" type="text" onChange="readImg()"></input>
<div id='showImg'></div>
</body>
</html>

Unfortunately no, as it's for security reasons. If someone, for example, sent you an HTML file which would dig for your local files and send them to remote server, would you be happy that browser allowed for that to happen? — Michał Kostrzyński, Oct 28 '15 at 11:28
Thank you but I still get this error : `` Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.` — John, Oct 28 '15 at 13:28

Modify pixels in remote image in plain html/js

1 Answers1