强大的CSS：滤镜和混合模式解决的图片如何上传下载？

一、使用CSS滤镜和混合模式在线PS

使用CSS滤镜和混合模式可以实现各种各样的图像解决效果，内置众多图像解决效果，部分效果示意如下缩略图：

进入demo页面你也可以点击这里的按钮，更换你本地的素材，查看对应的图像效果：

呈现的效果虽好，但是也带来另外一个问题，尽管视觉上是已经解决后的图片，但是假如我们右键-图片另存为，会发现还是原图。

假如客户觉得某个图片解决后的效果很棒，想要保存到自己的本机，就会受阻。

或者者说，我们基于CSS滤镜和混合模式制作了一款图像解决的工具，最后需要把这些已经解决好的图片上传到后端，作为一个独立的<img>元素使用，也会受阻。

怎样办？难道我们要放弃这么好的特性，还使用canvas来解决图像吗？[图片上传失败…(image-9fb53e-1558444076034)]

不需要的，实际上是有方法可以得到CSS解决后的图像的。

二、SVG foreignObject元素与视觉存储

SVG中有个<foreignObject>元素，可以实现在SVG内部嵌入XHTML元素，例如：

// 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');

而SVG本质上就是个图像，也就是说，我们只要要把图像解决相关的HTML代码和CSS代码放在<foreignObject>元素中，而后作为<img>图像呈现，而后再绘制到canvas画布上，这样即可以得到纯正的解决后的位图图像了。

demo页面最后一张图片和CSS解决后的图片长相虽同，但是本质却不同，一个还是原始图（试试右键-另存为），一个本质上是合成图（试试右键-另存为），如下截图示意：

于是，接下来，无论是是要下载到本机还是上传到服务器都不是问题。

关于上传，可以传输图像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做你任何你想做的事情……});

四、其它说明以及结束语

1. cssRenderImage2PureImage方法高度定制，假如你的CSS滤镜解决的DOM结构有所不同，你需要根据你的项目场景调整下cssRenderImage2PureImage方法里面的代码；
2. <foreignObject>元素是著名的html2canvas工具的核心，通常少量小的局部的截图功能，我们直接自己撸十几行代码解决下就好了，更高效更灵活。关于SVG的<foreignObject>元素，我之前专门写过一个文章详情过：“SVG <foreignObject>简介与截图等应用”，想要深入理解实现原理的人可以看看。
3. 此技术实现请在Chrome浏览器下玩耍。

本文所提供的处理方案和应用场景涉及到了CSS滤镜和混合模式，SVG <foreignObject>元素，以及Canvas的图像绘制和解决技巧。幸亏这3个领域是自己着重学习的领域，假如有哪一方面缺失，处理方案肯定无法信手捏来。

我们到底要学什么东西，不是看这个东西究竟热不热门，而是要看跟你想感兴趣的领域能否相关，SVG和Canvas实际上属于小众领域，但都与图形体现密切相关，因而，义无反顾学习，而且学习的时候不要只学热门的API，少量不常用的特性，API也要面面俱到，例如SVG <foreignObject>元素就是个很不常用的SVG元素，但在这里大放异彩，是技术实现的最关键部分。

自己是一个五年的前台工程师,希望本文对你有帮助！

这里推荐一下我的前台学习交流扣qun：731771211 ，里面都是学习前台的，假如你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前台学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到手机端HTML5的项目实战的学习资料都有整理，送给每一位前台小伙伴，每天分享技术

点击：加入