CSS滤镜和混合模式处理的图片需要怎样上传下载

　　介绍

这篇文章主要介绍CSS滤镜和混合模式处理的图片需要怎样上传下载,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

使用CSS滤镜和混合模式可以实现各种各样的图像处理效果,例如CSSgram项目,内置众多图像处理效果,部分效果示意如下缩略图:

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

呈现的效果虽好,但是也带来另外一个问题,虽然视觉上是已经处理后的图片,但是如果我们右键——图片另存为,会发现还是原图。

如果用户觉得某个图片处理后的效果很棒,想要保存到自己的本机,就会受阻。

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

怎么办?难道我们要放弃这么好的特性,还使用帆布来处理图像吗?

不需要的,实际上是有方法可以得到CSS处理后的图像的。

<强>二,SVG foreignObject元素与视觉存储

SVG中有个& lt; foreignObject>元素,可以实现在SVG内部嵌入XHTML元素,例如:

& lt; SVG xmlns=癶ttp://www.w3.org/2000/svg"比; 　　& lt; foreignObject宽度=?20”;身高=?0“比; 　　& lt;身体xmlns=癶ttp://www.w3.org/1999/xhtml"比; 　　& lt; p>文字。;/p> 　　& lt;/body> 　　& lt;/foreignObject> 　　& lt;/svg>

而SVG本质上就是个图像,也就是说,我们只需要把图像处理相关的HTML代码和CSS代码放在& lt; foreignObject>元素中,然后作为& lt; img>图像呈现,然后再绘制到画布画布上,这样就可以得到纯正的处理后的位图图像了。

演示页面最后一张图片和CSS处理后的图片长相虽同,但是本质却不同,一个还是原始图(试试右键-另存为),一个本质上是合成图(试试右键-另存为),如下截图示意:

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

关于纯前端下载图片,可以参考我之前这篇文章:“JS前端创建HTML或json文件并下载”的part3部分。

关于上传,可以传输图像canvas.toDataURL()的base64数据,也可以传输canvas.toBlob()的斑点数据:

//帆布转为Blob并上传画布。toBlob(函数(blob){//图片ajax上传 　　var xhr=new XMLHttpRequest ();//文件上传成功 　　xhr。onload=function () {//xhr.responseText就是返回的数据 　　};//开始上传 　　xhr.open (“POST" & # 39; upload.php& # 39;, true); 　　xhr.send (blob); 　　},& # 39;图像/jpeg # 39;);

<强>三,我该如何在项目中使用?

上面的演示页面中,我写了个名为cssRenderImage2PureImage()的方法,可以把类似下面代码结构的CSS图像处理结果变成一张图片:

& lt; div id=癷nput"类=癱larendon-filter"比; 　　& lt; img src=https://www.yisu.com/zixun/薄?example.jpg”>