Two implementation methods for combining pictures in front-end canvas

---Restoring content starts---

need:

There is a fixed background image and a randomly generated QR code, which is merged into a picture for users to download.

Implementation 1: Pure handwriting. In order to save trouble, I directly gave the base64 to generate pictures. In fact, the generated base64 pictures are also used;

body:

<div align="center" style="display: none;">
     <!--<img src="./img/" width="300">-->
     <img src="/" width="300">
     <img src="./img/" width="300">
 </div>
 <div align="center">
     <input type="button" value="One-key synthesis" οnclick="hecheng()">
 </div>

js:

function hecheng(){
         draw(function(){
             ('imgBox').innerHTML='<img src="'+base64[0]+'">';
         })
     }
     var data=[],base64=[],imgArr=$('#imgArr').find('img');
     for(var i=0;i<;i++){
         (imgArr[i].src);
     }
     function draw(fn){
         var c=('canvas'),
                 ctx=('2d'),
                 len=;
         =300;
         =750;
         (0,0,);
         ='#fff';
         ();
         function drawing(n){
             if(n<len){
                 var img=new Image;
 // = 'Anonymous'; // Solve cross-domain
                 =data[n];
                 img.οnlοad=function(){
                     if(n==1){
                         (img,50,500,160,160);
                     }
                     else{
                         //(img,0,0,250,250);
                         (img,0,0,);
                     }
                     drawing(n+1);//Recursive
                 }
             }else{
 //Save the generated works pictures
                 (("image/jpeg",2.8));
 //alert((base64));
                 fn();
             }
         }
         drawing(0);
     }

Test results: Both Google Chrome and safari are OK on your phone, but uc is not OK.

Implementation 2: Based on the same, one is used to generate a QR code, and the other is to turn web page elements into pictures.

Source code: Link: /s/1c1SUiuW Password: 5iei

---Restoring content ends---