HTML to image

Foreword

During this period of work, I have been doing H5 of the canvas class. A key part of the development process is to convert the dom node into a picture. At first, I used html2canvas to do it. After doing it, I felt that the effect of image clarity was not very good. Then I found the domtoimage js plugin on GitHub and replaced the previous html2canvas. After the replacement, not only the clarity has been improved, but also the supported picture formats and dom node styles are more than html2canvas.

Concise domtoimage

The main code of domtoimage is only more than 700 lines, and the methods and attributes are relatively few. After downloading, you will know how to use it and what functions are available. Although there are more than 3000 lines of html2canvas code, it is actually not difficult to call, but relatively speaking, the code is indeed much more than domtoimage.

The main methods of domtoimage are:

domtoimage.toPng (...); Convert the node to a picture in png format


var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

domtoimage.toJpeg (...); Convert the node to a picture in jpg format

domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'my-image-name.jpeg';
        link.href = dataUrl;
        link.click();
    });

domtoimage.toSvg (...); Convert the node to a picture in svg format, the format of the generated pictures are all base64 format.

function filter (node) {
    return (node.tagName !== 'i');
}

domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
    .then(function (dataUrl) {
        /* do something */
    });

domtoimage.toBlob (...); Convert the node to binary format, this can download the image directly, is it very convenient

domtoimage.toBlob(document.getElementById('my-node'))
    .then(function (blob) {
        window.saveAs(blob, 'my-node.png');
    });

domtoimage.toPixelData (...); Get the original pixel value and return it in the form of Uint8Array array. Every 4 array elements represent a pixel, that is, rgba value. This method is also very practical and can be used to write shader colors in WebGL.

var node = document.getElementById('my-node');

domtoimage.toPixelData(node)
    .then(function (pixels) {
        for (var y = 0; y < node.scrollHeight;   y) {
          for (var x = 0; x < node.scrollWidth;   x) {
            pixelAtXYOffset = (4 * y * node.scrollHeight)   (4 * x);
            /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
            pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset   4);
          }
        }
    });

The main properties of domtoimage are:

filter: the unneeded nodes in the filter node;

bgcolor: background color of the picture;

height, width: width and height of the picture;

style: the style of the incoming node, which can be any valid style;

quality: the quality of the picture, that is, the clarity;

cacheBust: add the timestamp to the URL of the picture, which is equivalent to adding a new picture;

imagePlaceholder: When the image generation fails, the prompt above the image is equivalent to the alt of the img tag

The above is taken from GitHub

domtoimage and html2canvas comparison

Compatible with more styles and labels

In the H5 I made, the node not only contains gradients, filters, shadows and other difficult-to-render styles, but also contains various svg tags. At the same time, svg has attributes such as stroke and fill.

dome

Both are directly calling the excuse without any processing. It can be seen from the comparison that domtoimage has more styles than html2canvas and is compatible with filters, box-shadow and other styles, which can better support svg.

The generated picture is relatively clear

Also use the simplest method to call two methods to generate pictures, you can see that the pictures generated by domtoimage are much clearer than html2canvas

After zooming in slightly, you can see the difference very clearly

dome

domtoimage is not enough

Not all styles of domtoimage are compatible. The attributes that I have found so far are incompatible, such as graphics mask-box-image and svg drop-shadow. Because of the project needs, I dealt with the compatibility problem of the graphics mask, and the svg drop-shadow is really a bit difficult, and it is temporarily placed. The compatible code for the graphics mask is in the second dome below. I won't talk much about it here

dome cannot directly survive with domtoimage

dome post-processing survivable pictures