百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> CSS滤镜和混合模式处置的图片怎样上传下载?
分享文章到:

CSS滤镜和混合模式处置的图片怎样上传下载?

发布时间:09/01 来源:未知 浏览: 关键词:
运用CSS滤镜和混合模式可以实现许许多多的图像处置结果,例如CSSgram项目,内置众多图像处置结果;SVG中有个<foreignObject>元素,可以实此刻SVG内部嵌入XHTML元素;SVG本质上就是个图像。

呈现的结果虽好,但是也带来别的一个题目,虽然视觉上是已经处置后的图片,但是要是我们右键-图片另存为,会发明还是原图。

要是会员觉得某个图片处置后的结果很棒,想要保留到本人的本机,就会挨阻。

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

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

不需要的,现实上是有办法可以得到CSS处置后的图像的。

二、SVG foreignObject元素与视觉存储

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


  
      
        

文字。

而SVG本质上就是个图像,也就是说,我们只需要把图像处置相干的HTML代码和CSS代码放在元素中,然后作为图像呈现,然后再绘制到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图像处置效果酿成一张图片:

    
.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滤镜和混合模式处置的图片怎样上传下载?的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板