http://www.ioposts.com

                                                                  【亿彩彩票网址】CSS滤镜和混合模式处理的图片如何上传下载?-css教程

                                                                  一、使用CSS滤镜和混合模式在线PS(推荐学习:CSS视频教程)

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

                                                                  css-1.jpg

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

                                                                  css-2.pngcss-2.png

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

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

                                                                  或者说,我们基于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处理后的图片长相虽同,但是本质却不同,一个还是原始图(试试右键-另存为),一个本质上是合成图(试试右键-另存为),如下截图示意:

                                                                  css-3.png

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

                                                                  关于纯前端下载图片,可以参考我之前这篇文章:“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');
                                                                                  

                                                                  郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:类索尼PS Vita风格,GPD Win Max Windows 10微型掌机曝光 - GPD,Windows 10,电脑
                                                                  下一篇:没有了