If you encounter some sinkholes in the process, don’t be afraid, XIAobian I have found some solutions online

Html2canvas – Summary of potholes encountered in the project (in update…)

Html2canvas library in the use of problems and solutions

How to install

Use NPM or YARN

npm install html2canvas

yarn add html2canvas

Copy the code

The import

import html2canvas from 'html2canvas'

Copy the code

usage

html2canvas(document.body).then(function(canvas) {

    document.body.appendChild(canvas);

});

Copy the code

So a basic code looks like this:

<! DOCTYPEhtml>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />

    <title>Document</title>

    <script src=".. /js/html2cancas.js"></script>

  </head>

  <body></body>

  <script>

    html2canvas(document.body).then(function (canvas) {

      document.body.appendChild(canvas)

    })

  </script>

</html>



Copy the code

Name Default Description
allowTaint false Whether to allow cross-domain rendering of canvas
backgroundColor #ffffff Canvas background color, if not specified in the DOM. Set null to transparent
canvas null The existing “canvas” element is used as the base for drawing
foreignObjectRendering false Whether to render with ForeignObject if the browser supports it
imageTimeout 15000 Timeout to load the image in milliseconds. Set to 0 to disable timeout.
ignoreElements (element) => false Removes the matching element from the rendering.
logging true Enable logging for debugging purposes
onclone null The callback function, called when the document is cloned for rendering, can be used to modify what is to be rendered without affecting the original source document.
proxy null The Url toThe agentFor loading cross-source images. If the left side is empty, the cross-origin image will not be loaded.
removeContainer true Whether to clear cloned DOM elements temporarily created by HTML2Canvas
scale window.devicePixelRatio The scale used for rendering. Default browser device pixel ratio.
useCORS false Whether to try to load images from the server using CORS
width Element width Width of canvas
height Element height The height of the canvas
x Element x-offset Crop canvas coordinates
y Element y-offset Crop canvas coordinates
scrollX Element scrollX The X-axis position used to render the element (for example, if the element uses “position: Fixed”)
scrollY Element scrollY The Y-axis position used to render the element (for example, if the element uses “position: Fixed”)
windowWidth `Window.innerWidth The window width used when rendering “elements”, which can affect things like media queries
windowHeight Window.innerHeight The height of the window used to render “elements”, which can affect things like media queries

If you want to exclude certain elements from rendering, you can add data-html2canvas-ignore to these elements and HTML2Canvas will exclude them from rendering.

Below is a list of all supported CSS properties and values.

  • background
    • background-clip (Does not support text)
    • background-color
    • background-image
      • url()
      • linear-gradient()
      • radial-gradient()
    • background-origin
    • background-position
    • background-size
  • border
    • border-color
    • border-radius
    • border-style (Only supports solid)
    • border-width
  • bottom
  • box-sizing
  • content
  • color
  • display
  • flex
  • float
  • font
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
  • height
  • left
  • letter-spacing
  • line-break
  • list-style
    • list-style-image
    • list-style-position
    • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • overflow
  • overflow-wrap
  • padding
  • position
  • right
  • text-align
  • text-decoration
    • text-decoration-color
    • text-decoration-line
    • text-decoration-style (Only supports solid)
  • text-shadow
  • text-transform
  • top
  • transform (Limited support)
  • visibility
  • white-space
  • width
  • word-break
  • word-spacing
  • word-wrap
  • z-index

The reason why the screenshot is blurred

The idea is to make the canvas double the width and height of the canvas.

Later, when I learned canvas, I learned that this writing method is different from the width and height Settings of CSS.

Because CSS only shows the size of the canvas, not the real resolution of the canvas.

/* Image cross domain and screenshot blur */

let shareContent = domObj,// The wrapped (native) DOM object that needs a screenshot

    width = shareContent.clientWidth,//shareContent.offsetWidth; // Get the DOM width

    height = shareContent.clientHeight,//shareContent.offsetHeight; // Get the DOM height

    canvas = document.createElement("canvas"), // Create a canvas node

    scale = 2; // Define arbitrary magnification to support decimals

canvas.width = width * scale; // Define canvas width * scale

canvas.height = height * scale; // Define canvas height * scale

canvas.style.width = shareContent.clientWidth * scale + "px";

canvas.style.height = shareContent.clientHeight * scale + "px";

canvas.getContext("2d").scale(scale, scale); // Get context, set scale

let opts = {

    scale: scale, // Add the scale parameter

    canvas: canvas, // Custom canvas

    logging: false.// Log switch, easy to view html2Canvas internal execution process

    width: width, // the original dom width

    height: height,

    useCORS: true [Major] Enable cross-domain configuration

};

Html2canvas (shareContent, opts). Then ()

Copy the code

* Elements set text shadow, screenshots after the shadow confusion, all elements will have shadow *

At first I thought there was a problem with the latest version of V1.0.0-alpha.12, but it didn’t work if I changed it to 5, just remove the text shadow.

This question in a great god post have a solution: https://blog.csdn.net/SDUST_JSJ/article/details/78122610

Here are some excerpts from this question:

Text set text-shadow screenshot without text shadow (2017-09-28)

Bug reason

Html2canvas does handle text-shadow, but does not handle decimals correctly, resulting in the final text shadow not displayed. The code is line 1762

NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-? \d+px){0,})/g;

NodeContainer.prototype.TEXT_SHADOW_VALUES = / [-? \d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

Copy the code

The solution

For these two lines of regular expression, I added a judgment for decimals, and the modified code looks like this:

NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-? \d+(? :\.\d+)? px){0,})/g;

NodeContainer.prototype.TEXT_SHADOW_VALUES = / [-? \d+(? :\.\d+)? px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

Copy the code

Testing:

Html2canvas regex matches

'RGB (102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)\([^\)]+\)(\s-? \d+px){0,})/g); // ["rgb(102, 102, 102)"]

"RGB (102, 102, 102) 11.924px 11.924px 0px".match(/ [-? \d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g); // ["rgb(102, 102, 102)", "924px", "924px", "0px"]

 

// Modified re match

'RGB (102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)\([^\)]+\)(\s-? \d+(? :\.\d+)? px){0,})/g); // [" RGB (102, 102, 102) 11.924px 11.924px 0px"]

"RGB (102, 102, 102) 11.924px 11.924px 0px".match(/ [-? \d+(? :\.\d+)? px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g); / / / "RGB (102, 102, 102)", "11.924 px", "11.924 px", "0 px]"

Copy the code