3

假设以下 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 在画布本身中复制这些过滤器。Pixel Manipulation Tutorial或像CamanJS这样的实体库。

4

1 回答 1

0

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

但是，我建议您可以使用画布来做图像过滤器。

然后只需将画布转换为图像并在新的浏览器选项卡中自行打开修改后的图像。

指示用户“右键单击另存为”，你很好。

我建议这种方法有几个原因：

  • 用户通常知道（并且习惯于）右键单击另存为方法。

  • 即使您发现了强制 JS 本地保存的黑客行为，浏览器也会将黑客行为视为安全问题并最终禁止黑客行为。更不用说，黑客几乎总是跨浏览器的噩梦。

顺便提一句：

除了 CamanJS，Pixastic 是另一个不错的图像过滤器库：

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

于 2013-07-16T17:28:51.830 回答