Some pits of HTML2Canvas

1. Blurring: Do not add background as a background element, insert it into the DOM

2. The problem of blurring the text. Increasing the scale value is the magnification factor, but the capacity of the picture will become larger

3. Html2canvas supports very weak CSS, and it is best to use position to position

Code snippet

     function cloneImg(){
        var shareContent = document.getElementById('bg');// The wrapped (native) DOM object that needs a screenshot
        var width = shareContent.offsetWidth; // Get the DOM width
        var height = shareContent.offsetHeight; // Get the DOM height
        var canvas = document.createElement("canvas"); // Create a canvas node
        var scale = 3; // Define arbitrary magnification to support decimals
        canvas.width = width * scale; // Define canvas width * scale
        canvas.height = height * scale; // Define canvas height * scale
        canvas.getContext("2d").scale(scale,scale); // Get context, set scale
        var opts = {
            scale:scale, // Add the scale parameter
            canvas:canvas, // Custom canvas
            logging: true.// Log switch
            width:width, // the original dom width
            height:height, //dom original height
            useCORS: true.dpi:300

        };
        html2canvas(shareContent, opts).then(function (canvas) {
            IMAGE_URL = canvas.toDataURL("image/png");
            var img=new Image();
            img.src=IMAGE_URL
            img.onload=function(){$("#clone").append(img)
                $("#loading").hide()
                $("#bg").hide(); }})}Copy the code

<div>
   <img src="img/bg.png" alt="" class="imgbg">
</div>
Copy the code