如何下载带有 CSS 叠加效果的图像？

Question

我的相册中有一些图片正在使用。我使用 HTML 和 CSS 创建了一个图片库。我使用 CSS 效果将图片更改为黑白。 现在我想下载带有CSS黑白效果的图片，但问题是当我下载它时。它给了我没有 CSS 黑白的原始图像。 谁能告诉我使用 CSS 效果后如何下载图片？

<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">

Answer 1

这是我使用的插件：DOM to Image library

如果你使用 NPM：

npm install dom-to-image

然后导入，

import domtoimage from 'dom-to-image';

带有需要下载为图像的标记的示例 HTML：

<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>

使用 CSS 应用的示例过滤器：

img {
    filter: grayscale(100%);
  }

转换为 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);
    });
  }

转换为 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);
    });
  }

下载为 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();
    });
  }

下载为 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();
    });
  }