How to download image with css overlay effects?

Question

I have some images that I am using in my album. I create an image gallery using HTML and CSS. I changed the picture into black and white using a CSS effect. Now I want to download the picture with CSS black and white effects but problem is that when I download it. It gives me the original image without CSS black and white. Anyone can tell me how to download image after using CSS effects?

<style>
img {
  -webkit-filter: grayscale(100%); /* convert image to black and white */
  filter: grayscale(100%);
}
</style>

<p>Convert the image to black and white:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">

See: https://stackoverflow.com/questions/39854891/how-to-save-an-image-with-css-filter-applied — TemporaryName, Sep 01 '19 at 15:19
Possible duplicate of [How to save an image with CSS filter applied](https://stackoverflow.com/questions/39854891/how-to-save-an-image-with-css-filter-applied) — Andrzej Ziółek, Sep 01 '19 at 15:46
Thanks, sir for your response but here download is not working @TemporaryName — Assad Yaqoob, Sep 02 '19 at 06:38
Exactly. It is not possible that easily. Easiest solution is shown in the linked post. @AssadYaqoob — TemporaryName, Sep 02 '19 at 18:01

score 1 · Answer 1 · answered Nov 07 '21 at 06:49

This is the plugin that I make use of: DOM to Image library

If you're using NPM:

npm install dom-to-image

then import,

import domtoimage from 'dom-to-image';

Sample HTML with markup that needs to be downloaded as image:

<div id="my-node">
    <img src="/assets/images/image.jpg"/>
</div>

<div class="btn-group">
    <button class="btn-primary" (click)="convertToPng()">Convert to PNG</button>
    <button class="btn-primary" (click)="convertToJpeg()">Convert to JPEG</button>
    <button class="btn-primary" (click)="downloadAsPng()">Download as PNG</button>
    <button class="btn-primary" (click)="downloadAsJpeg()">Download as JPEG</button>
</div>

Sample filters applied using CSS:

img {
    filter: grayscale(100%);
  }

To Convert to PNG:

convertToPng(){
    let node = document.getElementById('my-node');
    domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
  }

To Convert to JPEG:

convertToJpeg(){
    let node = document.getElementById('my-node');
    domtoimage.toJpeg(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
  }

To Download as PNG:

downloadAsPng(){
    let node = document.getElementById('my-node');
    domtoimage.toPng(node)
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.png';
        link.href = dataUrl;
        link.click();
    });
  }

To Download as JPEG:

 downloadAsJpeg(){
    let node = document.getElementById('my-node');
    domtoimage.toJpeg(node, { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });
  }

A great solution if one needs to download many images programmatically, but for just one or a few images, there's always Print-to-PDF. Most browsers have an option to print as a PDF with all images/styling included, and from there its trivial to convert the PDF to whatever image format you may want. — diopside, Nov 07 '21 at 07:12

How to download image with css overlay effects?

1 Answers1

Linked