将带有CSS3过滤器的图像元素转换为Blob对象

Question

假设以下HTML结构：

<div id="image-blob" class="filter-wrapper">
    <img id="pic" src="">
</div>

我正在应用CSS3过滤器，例如-webkit-filter: blur(1px) brightness(1.5) contrast(1.8) drop-shadow(black 16px 16px 20px) grayscale(0.2) hue-rotate(90deg) invert(0.1) saturate(3.6) sepia(0.3);到<img>元素。

是否有可能将带有过滤器的渲染图像转换为blob，并使最终用户下载，而不涉及任何服务器端过程/代理？

注意：客户端下载使用FileSaver.js进行，并且可能使用HTML2Canvas进行转换到画布。

编辑：

进一步调查显示这可能不可能（欢迎证明此错误），唯一的解决方案可能是通过JavaScript在画布本身中复制这些过滤器。 像素操作教程 或一个可靠的库，如CamanJS。

- Bassem

---

你的假设是正确的。将经过 post-CSS 处理的图像保存到磁盘的唯一方法是在键盘上按 alt-PrtScr。 - Niels Keurentjes

Answer 1

@NielsKeurentjes正确指出，出于安全考虑，浏览器阻止JavaScript将大多数网页内容保存在本地。

然而，我提供一个方法，你可以使用画布来进行图像滤镜处理。

然后，简单地将画布转换为图像，并在新的浏览器选项卡中打开修改后的图像。

告诉用户“右键另存为”，这样就完成了。

我之所以建议使用这种方法，有几个原因：

- 用户通常熟悉并且对“右键另存为”方法感到舒适。 - 即使你找到了强制JS本地保存的黑客方法，浏览器也会将其视为安全问题，并最终禁止该黑客方法。更不用说，黑客方法几乎总是在各种浏览器上面都难以实现。

顺便提一下：

除了CamanJS，Pixastic也是一个不错的图像滤镜库。

http://www.pixastic.com/lib/docs/

- markE