Html2canvas can take a screenshot of the whole or part of the page directly on the user’s browser. This HTML2Canvas script will be implemented when the page is rendered as a Canvas image by reading the DOM and applying different styles to these elements

It doesn’t require any rendering from the server, the entire image is created in the client browser. When the browser does not support Canvas, Flashcanvas or ExplorerCanvas technology will be used instead.

  • The basic grammar
html2canvas(element, options); html2canvas(document.body, { onrendered: function(canvas) { var url = canvas.toDataURL(); / / picture address document. The body. The appendChild (canvas); }, width: 300, height: 300Copy the code

Html2canvas Basic parameter description

The parameter name type The default value describe
allowTaint boolean false Whether to allow cross-origin images to taint the canvas– allows cross-domain
background string #fff Canvas background color, if none is specified in dom. Set undefined for transparent– Canvas background color if default transparency is not specified
height number null Define the heigt of the canvas in pixels. If null, renders with full height of the window.– Canvas height setting
letterRendering boolean false Whether to render each letter seperately. Necessary if letter-spacing is used
logging boolean false Whether to log events in the console.– Output information in console.log()
proxy string undefined Url to the proxy which is to be used for loading cross-origin images. If left empty, Cross-origin images won”t be loaded
taintTest boolean true Whether to test each image if it taints the canvas before drawing them
timeout number 0 Timeout for loading images, in milliseconds. Setting it to 0 will result in no Timeout
width number null Define the width of the canvas in pixels. If null, renders with full width of the window.– Canvas width
useCORS boolean false Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy– I don’t know what that is
  • Missing image in generated image

In fact, it involves cross-domain problems. Even in the canvas, there are requirements for the image domain. How should we solve this problem?

Html2canvas configuration item allowTaint: True or useCORS:true(not used together)

Img tag add crossOrigin=’anonymous’ image server configure access-Control-allow-Origin or use a proxy

The third step is the most important. If you do not set the first two steps, they will be invalid. Header (” access-Control-allow-origin: *”) indicates that any domain name is allowed. Copy code or specify domain name:

header("Access-Control-Allow-Origin: xxx");
Copy the code
  • The resulting image has missing elements

Because HTML is dynamically generated, it is better to use setTimeout delay to convert to canvas, otherwise the HTML DOM element may not be finished loading.

  • To convert HTML to images, there are a few things to note about the CSS style:

Rem cannot be used to define text size and element width and height, otherwise the element cannot be displayed and background cannot be added. If the background color is set to red or a background image, there will be an extra element inexplicablely

  • The resulting image is blurred and jagged

Scale and DPI are available, and the scale parameter is recommended.

Let imgHeight = window. The document. QuerySelector (' content '), offsetHeight / / get the DOM height let imgWidth = Window. The document. QuerySelector (' content '). The offsetWidth / / get the DOM width let scale = window. DevicePixelRatio / / access device pixels html2canvas(window.document.querySelector('.content'), { useCORS: true, scale: scale, width: imgWidth, height: imgHeight }).then((canvas) => { window.document.querySelector('.content').remove() let elemImg = `<img src='${canvas.toDataURL('image/png')}' id='canvas-img' style='height: ${imgHeight}px; border-radius: 10px; width:${imgWidth}px'/>` window.document.querySelector('.container').innerHTML = elemImg })Copy the code
  • Text is blurred at high resolution

This is to be expected, get the device pixel percentage window.Devicepixelratio stretch canvas canvas can be…… No…

Then I realized that this was required for version 0.5. The default scale parameter for version 1.0 was already set, but it was still not clear.

Finally, take inspiration from the nuggets and the final solution is!!

All set to 4 times! namely

html2canvas(ele, {
    sacle: 4
}).then((canvas) => {});  
Copy the code