假设以下HTML结构：
<div id="image-blob" class="filter-wrapper">
<img id="pic" src="">
</div>
我正在将-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);等CSS3过滤器应用于<img>元素。
是否可以将带有过滤器的渲染图像转换为最终用户要下载的blob，而不涉及任何服务器端进程/代理？
注意：使用FileSaver.js进行客户端下载，并使用HTML2Canvas转换为画布
修改
进一步的调查表明，这可能是不可能的（证明这个错误是最受欢迎的），唯一的解决方案可能是通过画布本身的javascript复制这些过滤器。 Pixel Manipulation Tutorial或CamanJS等实体库。
答案 0 :(得分：0)
@NielsKeurentjes正确地指出，浏览器会阻止javascript在本地保存大多数网页内容以解决安全问题。
但是，我提议您可以使用画布来制作图像过滤器。
然后只需将画布转换为图像，并在新的浏览器选项卡中单独打开修改后的图像。
指示用户“右键单击 - 另存为”，您就可以了。
我建议这种方法有几个原因：
用户通常会知道（并且熟悉）右键单击另存为方法。
即使您发现黑客强制JS本地存储，浏览器也会认为黑客是安全问题并最终禁止黑客入侵。更不用说，黑客几乎总是跨浏览器做噩梦。
顺便说一句：
除了CamanJS，Pixastic是另一个很好的图像过滤器库：