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

三、我该如何在项目中使用？

上面的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浏览器下玩耍。