一、运用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滤镜和夹杂形式处置惩罚的图片怎样上传下载？的细致内容，更多请关注ki4网别的相干文章！
