CSS滤镜和混合模式处理的图片如何上传下载?

栏目: CSS · 发布时间: 5年前

内容简介:byzhangxinxu from本文可全文转载,个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8598

本文可全文转载,个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。

CSS滤镜和混合模式处理的图片如何上传下载?

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

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

CSS滤镜和混合模式处理的图片如何上传下载?

您可以狠狠地点击这里: CSSgram中的图像处理demo

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

CSS滤镜和混合模式处理的图片如何上传下载?

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

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

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

怎么办?难道我们要放弃这么好的特性,还使用canvas来处理图像吗? CSS滤镜和混合模式处理的图片如何上传下载?

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

二、SVG foreignObject元素与视觉存储

SVG中有个 元素,可以实现在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画布上,这样就可以得到纯正的处理后的位图图像了。

眼见为实,您可以狠狠地点击这里: SVG foreignObject存储CSS滤镜和混合模式处理的图片demo

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

<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做你任何你想做的事情……
});

四、其它说明以及结束语

  1. cssRenderImage2PureImage 方法高度定制,如果你的CSS滤镜处理的DOM结构有所不同,你需要根据你的项目场景调整下 cssRenderImage2PureImage 方法里面的代码;
  2. <foreignObject> 元素是著名的html2canvas工具的核心,通常一些小的局部的截图功能,我们直接自己撸十几行代码处理下就好了,更高效更灵活。关于SVG的 <foreignObject> 元素,我之前专门写过一个文章介绍过:“ SVG <foreignObject>简介与截图等应用 ”,想要深入了解实现原理的人可以看看。
  3. 此技术实现请在Chrome浏览器下玩耍。

本文所提供的解决方案和应用场景涉及到了CSS滤镜和混合模式,SVG <foreignObject> 元素,以及Canvas的图像绘制和处理技巧。幸好这3个领域是自己着重学习的领域,如果有哪一方面缺失,解决方案一定无法信手捏来。

我们究竟要学什么东西,不是看这个东西到底热不热门,而是要看跟你想感兴趣的领域是否相关,SVG和Canvas实际上属于小众领域,但都与图形表现密切相关,因此,义无反顾学习,而且学习的时候不要只学热门的API,一些不常用的特性,API也要面面俱到,例如SVG <foreignObject> 元素就是个很不常用的SVG元素,但在这里大放异彩,是技术实现的最关键部分。

好了,点到为止。

总之,希望本文能够可以解决你的项目需求。

CSS滤镜和混合模式处理的图片如何上传下载?

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8598

(本篇完)


以上所述就是小编给大家介绍的《CSS滤镜和混合模式处理的图片如何上传下载?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

MySQL技术内幕

MySQL技术内幕

姜承尧 / 机械工业出版社 / 2013-5 / 79.00元

《MySQL技术内幕:InnoDB存储引擎(第2版)》由国内资深MySQL专家亲自执笔,国内外多位数据库专家联袂推荐。作为国内唯一一本关于InnoDB的专著,《MySQL技术内幕:InnoDB存储引擎(第2版)》的第1版广受好评,第2版不仅针对最新的MySQL 5.6对相关内容进行了全面的补充,还根据广大读者的反馈意见对第1版中存在的不足进行了完善,《MySQL技术内幕:InnoDB存储引擎(第2......一起来看看 《MySQL技术内幕》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具