内容简介：byzhangxinxu from本文可全文转载，个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8598
本文可全文转载，个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。
一、使用CSS滤镜和混合模式在线PS
使用CSS滤镜和混合模式可以实现各种各样的图像处理效果，例如 CSSgram项目 ，内置众多图像处理效果，部分效果示意如下缩略图：
您可以狠狠地点击这里： CSSgram中的图像处理demo
进入demo页面你也可以点击这里的按钮，更换你本地的素材，查看对应的图像效果：
呈现的效果虽好，但是也带来另外一个问题，虽然视觉上是已经处理后的图片，但是如果我们右键-图片另存为，会发现还是原图。
如果用户觉得某个图片处理后的效果很棒，想要保存到自己的本机，就会受阻。
或者说，我们基于CSS滤镜和混合模式制作了一款图像处理的工具，最后需要把这些已经处理好的图片上传到后台，作为一个独立的 <img> 元素使用，也会受阻。
怎么办？难道我们要放弃这么好的特性，还使用canvas来处理图像吗？
不需要的，实际上是有方法可以得到CSS处理后的图像的。
二、SVG foreignObject元素与视觉存储
SVG中有个
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="120" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>文字。</p>
</body>
</foreignObject>
</svg>
而SVG本质上就是个图像，也就是说，我们只需要把图像处理相关的HTML代码和CSS代码放在 <foreignObject> 元素中，然后作为 <img> 图像呈现，然后再绘制到canvas画布上，这样就可以得到纯正的处理后的位图图像了。
眼见为实，您可以狠狠地点击这里： SVG foreignObject存储CSS滤镜和混合模式处理的图片demo
demo页面最后一张图片和CSS处理后的图片长相虽同，但是本质却不同，一个还是原始图（试试右键-另存为），一个本质上是合成图（试试右键-另存为），如下截图示意：
于是，接下来，无论是是要下载到本机还是上传到服务器都不是问题。
关于纯前端下载图片，可以参考我之前这篇文章：“ JS前端创建html或json文件并下载 ”的part3部分。
关于上传，可以传输图像canvas.toDataURL()的base64数据，也可以传输 canvas.toBlob() 的Blob数据：
// canvas转为blob并上传
canvas.toBlob(function (blob) {
// 图片ajax上传
var xhr = new XMLHttpRequest();
// 文件上传成功
xhr.onload = function() {
// xhr.responseText就是返回的数据
};
// 开始上传
xhr.open("POST", 'upload.php', true);
xhr.send(blob);
}, 'image/jpeg');
三、我该如何在项目中使用？
上面的demo页面中，我写了个名为 cssRenderImage2PureImage() 的方法，可以把类似下面代码结构的CSS图像处理结果变成一张图片：
<div id="input" class="clarendon-filter">
<img src="./example.jpg">
</div>
.clarendon-filter {
filter: contrast(1.2) saturate(1.35);
display: inline-block;
position: relative;
}
.clarendon-filter::before {
content: '';
display: block;
height: 100%;
width: 100%;
top: 0; left: 0;
position: absolute;
background: rgba(127,187,227,.2);
mix-blend-mode: overlay;
pointer-events: none;
}
cssRenderImage2PureImage() 方法语法：
cssRenderImage2PureImage(dom, callback);
其中：
- dom
- 必须参数。DOM对象。
- callback
- 可选参数。Function。回调方法，支持一个参数，为合成后的图片的base64信息。
示例：
cssRenderImage2PureImage(input, function (url) {
// url就是合成后的图片base64地址
// 你可以对url做你任何你想做的事情……
});
四、其它说明以及结束语
-
cssRenderImage2PureImage方法高度定制，如果你的CSS滤镜处理的DOM结构有所不同，你需要根据你的项目场景调整下cssRenderImage2PureImage方法里面的代码； -
<foreignObject>元素是著名的html2canvas工具的核心，通常一些小的局部的截图功能，我们直接自己撸十几行代码处理下就好了，更高效更灵活。关于SVG的<foreignObject>元素，我之前专门写过一个文章介绍过：“ SVG <foreignObject>简介与截图等应用 ”，想要深入了解实现原理的人可以看看。 - 此技术实现请在Chrome浏览器下玩耍。
本文所提供的解决方案和应用场景涉及到了CSS滤镜和混合模式，SVG <foreignObject> 元素，以及Canvas的图像绘制和处理技巧。幸好这3个领域是自己着重学习的领域，如果有哪一方面缺失，解决方案一定无法信手捏来。
我们究竟要学什么东西，不是看这个东西到底热不热门，而是要看跟你想感兴趣的领域是否相关，SVG和Canvas实际上属于小众领域，但都与图形表现密切相关，因此，义无反顾学习，而且学习的时候不要只学热门的API，一些不常用的特性，API也要面面俱到，例如SVG <foreignObject> 元素就是个很不常用的SVG元素，但在这里大放异彩，是技术实现的最关键部分。
好了，点到为止。
总之，希望本文能够可以解决你的项目需求。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8598
（本篇完）
以上所述就是小编给大家介绍的《CSS滤镜和混合模式处理的图片如何上传下载？》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- Nginx + Lua搭建文件上传下载服务
- HDFS 的文件上传下载的核心原理
- HDFS 的文件上传下载的核心原理
- Nginx + Lua搭建文件上传下载服务
- JSP servlet实现文件上传下载和删除
- SSH连接远程服务器，并实现文件上传下载
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
