CSS滤镜和混合模式处置的图片怎样上传下载？
一、使用CSS滤镜和混合模式在线PS（引荐学习：CSS视频教程）
使用CSS滤镜和混合模式可以实现许许多多的图像处置结果，例如CSSgram项目，内置众多图像处置结果，部分结果示意如下缩略图：
进入demo页面你也可以点击这里的按钮，改换你当地的素材，查看对应的图像结果：
显现的结果虽好，但是也带来别的一个问题，虽然视觉上是已经处置后的图片，但是假如我们右键-图片另存为，会发明还是原图。
假如会员觉得某个图片处置后的结果很棒，想要留存到本人的本机，就会受阻。
或者说，我们基于CSS滤镜和混合模式制作了一款图像处置的工具，最后需要把这些已经处置好的图片上传到后台，作为一个独立的<img>元素使用，也会受阻。
如何办？难道我们要舍弃这么好的特性，还使用canvas来处置图像吗？
不需要的，实际上是有办法可以得到CSS处置后的图像的。
二、SVG foreignObject元素与视觉储备
SVG中有个<foreignObject>元素，可以实此刻SVG内部嵌入XHTML元素，例如：
<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画布上，这样就可以得到纯正的处置后的位图图像了。
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工具的中心，平常一些小的部分的截图功效，我们直接本人撸十几行代码处置下就好了，更高效更灵敏。
此技术实现请在Chrome阅读器下玩耍。
以上就是CSS滤镜和混合模式处置的图片怎样上传下载？的具体内容，更多请关注百分百源码网其它相关文章！
