如何下载具有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();
    });
  }