Html2canvas HTML screenshot plug-in image magnification resolution solution, support arbitrary magnification, solve the original plug-in image offset problem

Author: Youzebin (2016.12.6) Download url: github.com/niklasvh/h….

1. First introduce html2Canvas. Js html2Canvas 0.5.0-beta4, the latest version

Necessary Step 1: Modify the source code of the plug-in: (there are two modifications)

1. Add an options.scale condition to the renderWindow method in line 999:

Source:

if (options.type === "view") {
                canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0.left: 0.x: 0.y: 0});
            } else if(node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas ! =null) {
                canvas = renderer.canvas;
            } else {
                canvas = crop(renderer.canvas, {width:options.width ! =null ? options.width : bounds.width, height:options.height ! =null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0.y: 0});

            }
Copy the code

To:

if (options.type === "view") {
                canvas = crop(renderer.canvas, {width: renderer.canvas.width.height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
            } else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement) {
                canvas = renderer.canvas;
            }else if(options.scale&& options.canvas ! =null) {log("Enlarge canvas",options.canvas);
                var scale = options.scale || 1;
                canvas = crop(renderer.canvas, {width: bounds.width * scale.height:bounds.height * scale, top: bounds.top *scale, left: bounds.left *scale, x: 0, y: 0});
            }
            else {
                canvas = crop(renderer.canvas, {width:  options.width! =null ? options.width : bounds.width.height: options.height! =null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
            }Copy the code

2. Line 943: change width,height in html2Canvas method:

Source:

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
    if (typeof(options.onrendered) === "function") {
        log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
        options.onrendered(canvas);
    }
    return canvas;
});Copy the code

To:

width = options.width! =null ? options.width : node.ownerDocument.defaultView.innerWidth;
height = options.height! =null ? options.height : node.ownerDocument.defaultView.innerHeight;
return renderDocument(node.ownerDocument, options, width.height, index).then(function(canvas) {
    if (typeof(options.onrendered) === "function") {
        log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
        options.onrendered(canvas);
    }
    return canvas;
});Copy the code

2. Usage

var shareContent = document.getElementById("shareContent");// 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 = 2; // 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
};

html2canvas(shareContent, opts).then(function (canvas) {
    // If you want to generate images, import canvas2image.js.
    //https://github.com/hongru/canvas2image/blob/master/canvas2image.js
    var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
    console.log(img);
});Copy the code

2017.7 optimize the way of using plug-ins, and attach demo (the modification of plug-ins still follows the above operation process)

(Sorry everyone, recently I found the bug of incomplete screenshots in the way of using the above plug-in, many people have various problems in the use of the plug-in. So I decided to improve the content of this article.)

Below I summarize some considerations, commented in the code, for your reference only. Fu: Fully used demo, as follows:


       
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>html2Canvas demo</title>
    <script>
        document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
    </script>
    <style>
        body.html.div.p.ul.li.a.img.span.button.header.footer.section {
            padding: 0;
            margin: 0;
        }

        *, :before.:after {
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            outline: none;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        ::-webkit-scrollbar {
            width: 0;
            opacity: 0;
        }

        button{
            font-family: simsun,"microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
        }
        body {
            font-family: "microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
            color: # 000;
            background-color: #f5f5f5;
            -webkit-overflow-scrolling: touch;
        }
        .share-container {
            padding-top: 0.72 rem;
            width: 2.35 rem;
            margin: 0 auto;
        }

        .share-content {
            padding-top: 0.72 rem;
            height:3rem;
            background-color: blue;
            border-radius: 5px;
            width: 100%;
        }
        .text{
            font-size: 0.36 rem;
            color: #f2f2f2;
        }
        .btn-share {
            width: 64%;
            height: 0.89 rem;
            background-color: #3baaff;
            border-radius: 0.89 rem;
            border: 1px solid #3baaff;
            color: white;
            font-size: 0.36 rem;
            margin: 0.75 rem 0 0.67 rem;
        }
        .btn-share:active{
            background-color: #1b96c8;
        }
    </style>
</head>
<body>
<section class="main-container">
    <header class="share-container" id="shareContainer">
        <div class="share-content" id="shareContent">
              <div class="text">
                  <p>Text, pictures, etc</p>
              </div>
        </div>
    </header>
    <footer class="footer-center">
        <button class="btn-share" id="btnShare">Cut & have spent figure</button>
    </footer>
</section>

<script src="static/js/html2canvas.js"></script>
<script>

    // Define the method to find the element
    function $(selector) {
        return document.querySelector(selector);
    }
    var main = {
        init:function(){
            main.setListener();
        },
        // Set the listening event
        setListener:function(){
            var btnShare = document.getElementById("btnShare");
            btnShare.onclick = function(){ main.html2Canvas(); }},// Get the pixel density
        getPixelRatio:function(context){
            var backingStore = context.backingStorePixelRatio ||
                    context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        },
        // Draw a DOM element to generate a screenshot canvas
        html2Canvas: function () {
            var shareContent = $("#shareContent");// The (native) DOM object of the part that needs to be drawn. Note that the container width does not use percentages. Use fixed widths to avoid scaling problems
            var width = shareContent.offsetWidth;  // Get the (native) DOM width
            var height = shareContent.offsetHeight; // Get the (native) DOM height
            var offsetTop = shareContent.offsetTop;  // The element's offset from the top

            var canvas = document.createElement('canvas');  // Create a canvas object
            var context = canvas.getContext('2d');
            var scaleBy = main.getPixelRatio(context);  // How to get the pixel density (custom scaling is also possible)
            canvas.width = width * scaleBy;   // Since the DOM is fixed width and centered, there is no offset
            canvas.height = (height + offsetTop) * scaleBy;  // Pay attention to the height problem, because there is a distance at the top, so we need to add the distance at the top to solve the problem of image height offset
            context.scale(scaleBy, scaleBy);

            var opts = {
                allowTaint:true.// Allow loading of images across domains
                tainttest:true.// Check that each image has been loaded
                scale:scaleBy, // Add the scale parameter
                canvas:canvas, // Custom canvas
                logging: true.// Log switch, set to false when publishing
                width:width, // the original dom width
                height:height //dom original height
            };
            html2canvas(shareContent, opts).then(function (canvas) {
               console.log("html2canvas");
                var body = document.getElementsByTagName("body");
                body[0].appendChild(canvas); }); }};// Finally run the code
    main.init();

</script>
</body>
</html>Copy the code

Before running the demo above, there are the followingPay attention to the point:

Html2canvas.js is not modified according to the instructions of the plug-in
Note the style of the elements: do not use percentages for the outer element width to avoid problems with the zoom between images and text
```
The incorrect usage is as follows.container {
       width:50%;
       margin: 0 auto;
 } 
Copy the code
```

Need to change to like:

 .container {
       width:300px;
       margin: 0 auto;
 } 
Copy the code

Download the full demo at github: github.com/omwteam/ht…. Give it a thumbs up if you think it works

Html2canvas HTML screenshot plug-in image magnification resolution solution, support arbitrary magnification, solve the original plug-in image offset problem