About the front-end screenshot of the crawled pit!

In many web projects, the pictures we save are in the background and we are responsible for rendering them to the page, but the front end can also take screenshots, but there will be many unexpected bug s. As we have met in the work, we should record them.

Premise: Send a picture of QR code and the name and gender of personal head image in the background and display it on the page, which is very simple, but we need to synthesize the name and gender of QR code personal head image into a picture and save it.

Tool plug-ins: html2canvas.js and canvas2images.js, now convert the page to canvas, and then convert the canvas to pictures for saving. Look at the code below!

var test = document.getElementsByClassName("box")[0];//You need a screenshot dom element
var width = test.offsetWidth; //Obtain dom width
var height = test.offsetHeight; //Obtain dom height

var canvas = document.createElement("canvas");//Create a canvas
var scale = 2;Because of the cell phone pixel density, you need to zoom the canvas,To improve the clarity of the screenshot
canvas.width = width * scale; //Definition canvas width * zoom
canvas.height = height * scale; //Definition canvas height *zoom
canvas.getContext("2d").scale(scale, scale);

html2canvas(test, {
    useCORS: true, Try to use CORS Load image from server,Cross domain is allowed, otherwise the background data screenshot is not available
    logging: true, //Log switch for easy viewing html2canvas Internal execution process of
    canvas: canvas,
    width: width, //Optional
    height: height, //Optional
    scale:scale, //Optional
   //The above is the basic configuration;
    onrendered: function(canvas) {
        var context = canvas.getContext("2d");
        //Antialiasing, important
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        var img = new Image();Create a picture object
        var url = canvas.toDataURL('image/jpeg');
        img.src = canvas.toDataURL('image/jpeg');toDataURL()The method is to canvas Turn into base64 Encoded picture;
        document.body.appendChild(img);Choose whether to render the picture to the page
        //How to save the cut pictures to the mobile phone? This is a method that calls H5 +, refer to
        var bitblmap = new plus.nativeObj.Bitmap('bitblmap');
            bitblmap.save("Route",{configuration parameter},successcallback,errorcalllback)
        },function(){mui.toast("Save failed")}




Save the clarity of the image (set the zoom), the white edge and black edge of the screenshot (eliminate the sawtooth), and the incorrect size of the image (write the width and height of the intercepted elements, and try not to use the positioning);

The above is the use of front-end screenshots, learn to try it quickly. There is no problem in the screenshot of pc end. It can be saved directly without zooming.

Tags: Javascript Mobile

Posted on Sun, 10 Nov 2019 16:49:53 -0500 by André D