How to upload and download images processed by CSS filters and mixed modes?

1. Online PS using CSS filters and blending modes

Using CSS filters and blending modes can achieve a variety of image processing effects, such as CSSgram project , built-in many image processing effects, some of the effects are shown in the following thumbnails:

Image processing effect diagram

You can click here: image processing demo in CSSgram

To enter the demo page, you can also click the button here to change your local material and view the corresponding image effect:

Use local picture preview

Although the rendering effect is good, it also brings another problem. Although the image is visually processed, if we right-click and save the image as, we will find that it is still the original image.

If the user feels that a certain picture has a great effect after processing and wants to save it to their own machine, they will be blocked.

In other words, we have made an image processing tool based on CSS filters and blending modes. Finally, we need to upload these processed images to the background to use them as an independent <img>element, which will also be blocked.

How to do? Are we going to give up such good features and use canvas to process images?

No, there is actually a way to get the image after CSS processing.

Two, SVG foreignObject elements and visual storage

There is a <foreignObject> element in SVG, which can embed XHTML elements inside SVG, for example:

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="120" height="50">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Text. </p>
      </body>
    </foreignObject>
</svg>

And SVG is essentially an image, that is to say, we only need to put the HTML code and CSS code related to image processing in the <foreignObject>element, and then <img>render it as an image, and then draw it on the canvas, so that we can get pure processing After the bitmap image was made.

Seeing is believing, you can click here: SVG foreignObject stores CSS filters and image demos processed by blending modes

The last picture on the demo page looks the same as the picture after CSS processing, but the essence is different. One is the original picture (try right-click-save as), and the other is essentially a composite picture (try right-click-save as), as follows Screenshot shows:

Image after processing

So, next, whether it is to download to the machine or upload to the server is not a problem.

Regarding the pure front-end downloading pictures, you can refer to the part3 part of my previous article: " Create html or json files in JS front-end and download them ".

Regarding uploading, you can transfer the base64 data of the image canvas.toDataURL(), or canvas.toBlob()the Blob data that can be transferred :

// convert canvas to blob and upload
canvas.toBlob(function (blob) {
    // Picture ajax upload
    var xhr = new XMLHttpRequest();
    // File upload successfully
    xhr.onload = function() {
         // xhr.responseText is the returned data
    };
    // Start upload
    xhr.open("POST", 'upload.php', true);
    xhr.send(blob);    
}, 'image/jpeg');

3. How should I use it in the project?

In the demo page above, I wrote a cssRenderImage2PureImage()method called , which can turn the CSS image processing result similar to the following code structure into a picture:

<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()Method syntax:

cssRenderImage2PureImage(dom, callback);

among them:

judgment

Required parameters. DOM object.

callback

Optional parameters. Function. The callback method supports one parameter, which is the base64 information of the synthesized picture.

Example:

cssRenderImage2PureImage(input, function (url) {
    // url is the base64 address of the synthesized image
    // You can do whatever you want to the url...
});

Four, other explanations and concluding remarks

cssRenderImage2PureImageThe method is highly customized. If the DOM structure processed by your CSS filter is different, you need to adjust cssRenderImage2PureImagethe code in the method according to your project scenario ;
<foreignObject>Elements are the core of the well-known html2canvas tool. Usually, some small partial screenshot functions can be processed directly by ourselves, which is more efficient and flexible. Regarding the <foreignObject>elements of SVG , I wrote an article about it before: " Introduction to SVG <foreignObject> and applications such as screenshots ". Those who want to learn more about the implementation principle can take a look.
Please play in Chrome browser to realize this technology.

The solutions and application scenarios provided in this article involve CSS filters and blending modes, SVG <foreignObject>elements, and Canvas image drawing and processing skills. Fortunately, these three areas are the areas where I focus on learning. If there is one missing, the solution will definitely not be easy to grasp.

What we have to learn is not whether it is popular or not, but whether it is related to the field you want to be interested in. SVG and Canvas are actually niche fields, but both are closely related to graphics performance. Therefore, Learn without hesitation, and don’t just learn popular APIs when you’re learning. Some uncommon features must also be comprehensive. For example, the SVG <foreignObject>element is a rarely used SVG element, but to shine here is the key to technical realization. section.

Okay, stop here.

In short, I hope this article can solve your project needs.