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

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

成都一家集口碑和实力的网站建设服务商,拥有专业的企业建站团队和靠谱的建站技术,十多年企业及个人网站建设经验 ,为成都上千客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设,品牌网站建设,同时也为不同行业的客户提供成都做网站、成都网站制作的服务,包括成都电商型网站制作建设,装修行业网站制作建设,传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选创新互联。

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

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

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

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

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

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

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

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

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

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

二、SVG foreignObject元素与视觉存储

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


  
      
        

文字。

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

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

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图像处理结果变成一张图片:

.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方法里面的代码;

元素是著名的html2canvas工具的核心,通常一些小的局部的截图功能,我们直接自己撸十几行代码处理下就好了,更高效更灵活。

此技术实现请在Chrome浏览器下玩耍。

以上是CSS滤镜和混合模式处理的图片需要怎样上传下载的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站栏目:CSS滤镜和混合模式处理的图片需要怎样上传下载
分享地址:http://myzitong.com/article/pjigih.html