I need to download the image after modification?

Question

I have a function that change image color to black and white and I want to download the image after changed using button

function preview(file) {
  if (file) {
    var reader = new FileReader()
    reader.readAsDataURL(file);
    reader.onloadend = function () { 
      document.getElementById("img").src = reader.result;
      document.getElementById("img").style.filter = "grayscale(100%)";
    }
  }
}

<input type="file" accept="image/*" onchange="preview(this.files[0])"/>
<br>
<img id="img"/>

Possible duplicate of [Download File Using Javascript/jQuery](https://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery) — Crick3t, Dec 22 '18 at 10:26

Prashant Pimpale · Answer 1 · 2018-12-22T11:06:59.530

You can do this with Javascript:

First, draw an image in Canvas with CSS and then create anchor tag programmatically and assign click to it

function preview(file) {
 if (file) {
  var reader = new FileReader()
  reader.readAsDataURL(file);
  reader.onloadend = function() {
   document.getElementById("img").src = reader.result;
   var canvas = document.getElementById('cnimage');
   var ctx = canvas.getContext('2d');
   ctx.filter = "grayscale(100%)"
   var img = document.getElementById("img");
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

   anchor = document.createElement('a');
   document.body.appendChild(anchor);
   anchor.download = name;
   var data = canvas.toDataURL("image/png");
   anchor.href = data;
   anchor.click();
   ctx.clearRect(0, 0, canvas.width,canvas.height);
  }
 }
}

<input type="file" accept="image/*" onchange="preview(this.files[0])"/>
<br>
<img id="img"/>

<canvas id="cnimage" height="400px" width="400px"></canvas>

I think the picture is drawn in canvas takes a lot more time, This is why a empty image is downloaded — farhat, Dec 22 '18 at 11:24

score 0 · Accepted Answer · answered Dec 22 '18 at 12:28

There are two things here :

We have to wait for the img.onload function before doing something
We need to copy the filter from the image to the canvas

function downloadImage(imgNode, name = 'fileName', format = 'png') {
  const canvas  = document.createElement('canvas');
  canvas.width  = imgNode.width;
  canvas.height = imgNode.height;

  const context  = canvas.getContext('2d');
  context.filter = getComputedStyle(imgNode).filter; // Add the image filter to the canvas
  imgNode.setAttribute('crossOrigin', 'anonymous');

  context.drawImage(imgNode, 0, 0, canvas.width, canvas.height);
  const url = canvas.toDataURL(`image/${format}`);

  const anchor    = document.createElement('a');
  anchor.href     = url;
  anchor.download = `${name}.${format}`;
  document.body.appendChild(anchor);
  anchor.click();
}

function preview(file) {
  if (file) {
    var reader = new FileReader()
    reader.readAsDataURL(file);
    reader.onloadend = function () {
      var img = new Image();
      img.src = reader.result;
      img.style.filter = "grayscale(100%)"; // Apply the CSS filter on the image
      document.body.appendChild(img); // Display image
      img.onload = function() {
        downloadImage(img); // Download image
        img.onload = null; // Prevent onload function called twice
      };
    }
  }
}

<input type="file" accept="image/*" onchange="preview(this.files[0])"/>
<br/>

that's good, but if you can add button for download the image will be great — farhat, Dec 22 '18 at 17:58
Replace `anchor.click();` by `anchor.textContent = "Download";` — Nicolas Roehm, Dec 23 '18 at 16:59

I need to download the image after modification?

2 Answers2