Front-End synthesis of two-dimensional code and background images, bulk export zip download

front-end synthesis of two-dimensional code and background images, bulk export zip download

Background: Need to generate a lot of two-dimensional code, and combined with background pictures to create pictures, bulk download to the local, provided to print manufacturers to print.

Scenario 1: Background synthesis, background to provide downloads.
Scenario 2: Front-End synthesis, front-end to provide downloads.

I have chosen scenario 2. This scheme relieves background pressure and does not save pictures in the background. The front end is ready to generate pictures based on the data and download it yourself.
Directly on the code (part of the front-end page is written with the jade template)

Generate a two-dimensional code + composite background image + Packaging

    Script (type= ' text/javascript ', src= ' http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js ') script ( src= ' http://gildas-lormeau.github.io/zip.js/demos/zip.js ') script (src= ' http://gildas-lormeau.github.io/zip.js/ Demos/mime-types.js ') script (type= ' text/javascript ', src= '/javascripts/ziparchive.js ')//-script (type= ' Text/jav Ascript ', src= '/javascripts/canvas-to-blob ')//-export the naming rules of the picture, the cabinet machine two-dimensional code with the model name + index, the cabinet machine lattice name with model name Model name + cell +index, pressure Shrink name with model name//-title Todo label#modalname= vmmodal.name + ' + vmmodal.type br label (style={' visibility ': ' Hi Dden ', ' position ': ' absolute '}) #elementCount = Batchdata.length button#downloadpdf.btn.btn-info (type= ' button '),
        onclick) Click Download zip <br> <br> table#xxxx script.
        var rowcount = document.getElementById ("Elementcount"). INNERHTML/1;

      Console.log (' get row count = ', rowcount);            
       Each rowvalue,index in Batchdata tr TD     -var rowId = ' vmdiv_ ' +index; Label (style={' visibility ': ' hidden ', ' position ': ' absolute '}) = RowId div (id=rowid, qrcode = Rowvalue.qrcode, sty
            le={' visibility ': ' hidden ', ' position ': ' absolute '} ' td-var rowcaid = ' Vmcanvas_ ' +index; Label (style={' visibility ': ' hidden '}) = Rowcaid//-if Rowvalue.qc_pos!= ' 0,0,0,0 ' canvas (ID=ROWCA Id,back_img_url=rowvalue.back_img_url,name=rowvalue.name,qc_pos=rowvalue.qc_pos,wd_pos=rowvalue.wd_pos,wd= //-TD//-Label= Rowvalue.qrcode//-<script "Rowvalue.nummark). src= . debug.js "></script>//-<script src="./javascripts/html2canvas.js "></script> canvas (i
        D= ' allimage ') script.

        var isdrawend = false;
            $ (function () {$ ("#downloadPdf"). Click (function () {if (!isdrawend) {return; //Switch to new page var modaLName = document.getElementById (' Modalname '). InnerHTML;
          Ziparc.export (Modalname);
        });        

        });
          function Draw () {let allwidth = 0;
          Let allheight = 0;
          Let Maginbetween = 20;
          Let Compinedimagecount = 0;

          Let WILLCOMC = rowcount;
            for (let i=0;i<rowcount;i++) {var index = i;
            Let rowId = ' vmdiv_ ' +index;

            Let Rowcaid = ' Vmcanvas_ ' +index;
            Let Qrorigin = document.getElementById (rowId);

            Let qrcompined = document.getElementById (Rowcaid);
            Let Img=new Image; 
            Img.crossorigin = ' anonymous ';
            IMG.SRC = Qrcompined.getattribute (' Back_img_url ');

              Img.onload=function () {console.log ("img width=", Img.width, '; IMG height= ', img.height);
              var qc_pos = Qrcompined.getattribute ("Qc_pos");
              var wd_pos = Qrcompined.getattribute ("Wd_pos"); var wd = qrcomPined.getattribute ("WD");

              var qrcode = Qrorigin.getattribute ("QRCode");
              var qrposary = Qc_pos.split (', ');

              var wdposary = Wd_pos.split (', ');
              Console.log (' Create QR id= ' +rowid+ ' qrorigin= ' +qrorigin);
                  $ (' #${rowid} '). QRCode ({render: "Canvas",//table way width:qrposary[2],//width HEIGHT:QRPOSARY[2],//Height Text:qrcode,//arbitrary content correctlevel:1,}

              );
              Draw two-dimensional code var c = qrcompined;
              var ctx = C.getcontext (' 2d ');
              C.width = Img.width;
              C.height = Img.height;
              -ctx.rect (0,0,0,0);
              Ctx.rect (0,0,img.width,img.height);
              ctx.fillstyle= ' Red ';      
              Ctx.fill ();        
              Img.crossorigin = ' anonymous ';

              Draw Background ctx.drawimage (img,0,0,img.width,img.height); Allwidth = MAth.max (Allwidth,img.width);

              Allheight = allheight + img.height + maginbetween; 
              Draw two-dimensional code qrorigin.crossorigin = ' Anonymous ';

              Ctx.drawimage (QRORIGIN.FIRSTCHILD,QRPOSARY[0]/1,QRPOSARY[1]/1,QRPOSARY[2]/1,QRPOSARY[3]/1);
              Draw ordinal//set font style Ctx.font = ' bold ' + wdposary[3]+ ' px fzdhtjw_0 ';
              Sets the font fill Color console.log (wd_pos);
              -ctx.fillstyle= ' white ';
              -Ctx.fillrect (wdposary[0],wdposary[1],wdposary[2],wdposary[3]);
              ctx.textalign= ' center ';  
              Ctx.textbaseline= "Middle";
              Ctx.fillstyle = "BLACK";

              Ctx.filltext (WD, parseint (wdposary[0)) +parseint (wdposary[2])/2, parseint (wdposary[1]) + parseint (wdPosAry[3))/2);
              compinedimagecount++; if (Compinedimagecount = = WILLCOMC) {//All pages are consolidated into a single allimagetogether (allwidth,allheight,maginb Etween,compineDimagecount);

        }}} draw ();
        var ziparc = new Ziparchive;
        Console.log (' ziparc= ', ZIPARC); function Allimagetogether (allwidth,allheight,maginbetween,compinedimagecount) {var modalname = Document.getElem
          Entbyid (' Modalname '). InnerHTML;
          -Console.log (' SFASFSDFSF ', modalname);

          -Return;
          Console.log (' Totoal width,height= ', allwidth+ ', ' +allheight ');
          var pos = 0;
            For [let i=0;i<compinedimagecount;i++] {let index = i;                      
            Let Rowcaid = ' Vmcanvas_ ' +index;
            Let qrcompined = document.getElementById (Rowcaid);            
            Let imagename = Qrcompined.getattribute (' name ');
            Qrcompined.crossorigin = ' anonymous ';
            Let image = Qrcompined.todataurl ();
            -Let image = Qrcompined.toblob ();


            var fileName = imagename + ' [' + i + '] ' + '. png '; ZipaRc.addfileimage (Filename,image);
            -Ctx.drawimage (Qrcompined,0,pos,qrcompined.width, qrcompined.height);
          -POS + qrcompined.height + maginbetween;
        } Isdrawend = true;

 }

Other JS code:
http://download.csdn.net/detail/qhexin/9620442