如何使用CSS滤镜保存图像

Question

我想知道如何将CSS滤镜应用于图像，然后将图像保存到磁盘。

例如，我有一个图像标签，我可以通过CSS应用褐色效果。

img.sepia{
  filter: sepia(20%);
}

然后将该类应用于HTML中的图像标签

<img src="img.png" class="sepia" />

如何保存应用了滤镜的图片？

- Rahul

---

截图 - adeneo

如果您只是为了自己使用，那么您可以随时从屏幕上截取截图。 - poush

不，我基本上想在我的网站上使用它。所以如果我上传一张照片到网站上，我可以通过CSS对其应用滤镜，然后将其保存到我的画廊中。 - Rahul

在浏览器中运行的JavaScript无法访问文件系统。 - rockerest

是的，确实无法保存图片...但是，可以提示用户保存图片。使用https://html2canvas.hertzen.com/从浏览器页面中截取任何大小的屏幕截图。 - Atul Sharma

Answer 1

您可以将图像写入画布元素，使用JavaScript设置所需的过滤器，然后下载它。代码示例如下：

var canvas = document.getElementById('image');
var ctx = canvas.getContext('2d');
ctx.filter = "sepia(20%)";
var img = document.getElementById("dataimage");
ctx.drawImage(img,0,0, canvas.width, canvas.height);

var downloadFile = document.getElementById('download');
downloadFile.addEventListener('click', download, false);


function download() {
   var dt = canvas.toDataURL('image/jpeg');
   this.href = dt;
};

img{
  width:400px;
  height:400px;
}

<img src="" id="dataimage" />
<canvas id="image" width="400px" height="400px"></canvas>
<a id="download">Download image</a>

- Teia Jamese Atkins

---

好的，谢谢你的建议。我现在会学习Canvas来解决这个问题。不过那个下载按钮对我没用... :) - Rahul

Answer 2

在选择 Canvas 方法之前，请检查浏览器的兼容性：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter 大多数移动浏览器不支持它。

我使用像 Cloudinary 这样的图像服务。

- slotdp02