首页 / CSS / CSS滤镜和混合模式处理的图片如何上传下载？

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS滤镜和混合模式处理的图片如何上传下载？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3050字，纯文字阅读大概需要5分钟。

内容图文

CSS滤镜和混合模式处理的图片如何上传下载？ - 文章图片

一、使用CSS滤镜和混合模式在线PS（推荐学习：CSS视频教程）

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

CSS滤镜和混合模式处理的图片如何上传下载？ - 文章图片

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

CSS滤镜和混合模式处理的图片如何上传下载？ - 文章图片CSS滤镜和混合模式处理的图片如何上传下载？ - 文章图片

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

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

或者说，我们基于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滤镜和混合模式处理的图片如何上传下载？ - 文章图片

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

关于纯前端下载图片，可以参考我之前这篇文章：“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做你任何你想做的事情……});

四、其它说明以及结束语

cssRenderImage2PureImage方法高度定制，如果你的CSS滤镜处理的DOM结构有所不同，你需要根据你的项目场景调整下cssRenderImage2PureImage方法里面的代码；

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

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

以上就是CSS滤镜和混合模式处理的图片如何上传下载？的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS滤镜和混合模式处理的图片如何上传下载？全部内容，希望文章能够帮你解决CSS滤镜和混合模式处理的图片如何上传下载？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/410213.html

来源：【匿名】