Mobile end to save the current screen contents as a picture, canvas picture mosaic

Requirements: 1, the moving end Click Share screenshot of the current screen and save it as an image 2, the screenshots of the picture mosaic pictures with a two-dimensional code to generate a new image

Technology stack: html2canvas.js, canvas2image.js

Code: (jquery js mixed and native wrote, not very standardized)

<Script type = "text / JavaScript">
   // Get page share button 
  var sharebtn = document.querySelectorAll ( 'Share.' );
     for (the let I = 0; I <sharebtn.length; I ++ ) {
         // for Add share button touch event 
        sharebtn [I] .ontouchend = function () {
             // html2canvas grammar, interception of the current screen into h5 Canvas 
      　　　　html2canvas (the document.body) .then (Canvas => { 
                document.body.appendChild (Canvas); 
                var canvasbox = document.getElementsByTagName ( 'Canvas') [0 ];
           　　　var W = canvasbox.width, H = canvasbox.height;
           　　　//canvas converted image and added to the body in order to obtain the image in the second image splicing 
                var IMG = Canvas2Image.convertToPNG (canvas, W, H); 
                img.id = 'IMG1'; 
                document.body.appendChild (IMG ) 
                
                // Create a new body to the canvas and add 
                var canvasel = document.createElement ( 'canvas' ); 
                canvasel.id = 'MyCanvas' ; 
                canvasel.width = 750 ; 
                canvasel.height = 1654 ; 
                document.body.appendChild (canvasel ); 
                
                // when the screen shot image is loaded, the method is performed 
                img.onload = function () {
                     //Get new canvas 
                    var MyCanvas = document.getElementsByTagName ( 'Canvas') [. 1 ];
               　　   var W = mycanvas.width, H = mycanvas.height;
                     var CTX = mycanvas.getContext ( '2D' );
                     // Create two splicing requires dimensional code image 
                    var lastimg = new new image (); 
                    lastimg.src = 'image / ewm.png';
                     // Get screenshots of images 
                    var IMG1 = document.getElementById ( 'IMG1' );
                     // when the two-dimensional code image is loaded after performing: 
                    lastimg.onload = function () {
                         //Draw the canvas two new image and converting the image to canvas 
                        ctx.drawImage (img1,0,0 ); 
                        ctx.drawImage (lastimg, 0,1334 );
                         var newImg = Canvas2Image.convertToPNG (MyCanvas, W, H );
                         // add pictures to the structure of the page and displays the structure 
                        document.getElementById ( 'imgbox' ) .appendChild (newImg); 
                        $ ( . '.img-show-wrap') removeClass ( 'hide' ); 
                        $ ( '.mask') removeClass ( 'hide'. ); 
                    } 
                } 
      　　　　}) 
          } 
    }
  </script>