如何保存应用了 CSS 过滤器的图像答案

【问题标题】：How to save an image with CSS filter applied如何保存应用了 CSS 过滤器的图像
【发布时间】：2017-02-12 18:32:32
【问题描述】：

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

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

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

并将类应用于 HTML 中的图像标签

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

如何在应用过滤器的情况下保存该图像？

【问题讨论】：

Screen grab
如果您正在寻找自己的用途，您可以随时从屏幕上截取屏幕截图。
不，我基本上想将它用于我的网站。因此，如果我将照片上传到网站，以便我可以通过 CSS 对其应用过滤器，然后将其保存到我的画廊。
您无法通过在浏览器中运行的 JavaScript 访问文件系统。
是的，您不能保存图像……但是，请提示用户保存图像.. 使用html2canvas.hertzen.com 从浏览器页面截取任意大小的屏幕截图。 .

标签： javascript jquery css filter

【解决方案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>

【讨论】：

好的。谢谢你的主意。我现在要学画布。来解决这个问题。但是那个下载按钮对我不起作用.. :)

【解决方案2】：

选择canvas方法前检查浏览器兼容性：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

大多数移动浏览器不支持它。

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

【讨论】：