生成二维码下载图片_qrcode 下载图片-CSDN博客

本文链接：https://blog.csdn.net/bbsyi/article/details/53115153

<html lang="en"><head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               /*background:url('bg_Qr-code.png');*/
               width: 125px;
               height: 161px;
               background-size: 100%;
               display: table;
               text-align: center;
           }
           .box img{
               display: table-cell;
               width: 60px;
               vertical-align: middle;
               margin: 50px auto;
           }
           #myQrCode{
               width: 600px;
               margin: 10px auto;
               display: table;
               height: 600px;
               background-size: 100%;
               background-repeat: no-repeat;
               position: relative;
           }
           #myQrCode img{
               width: 100%;
           }
           #myQrCode canvas{
               position: absolute;
               width: 50%;
               display: table-cell;
               /*width: 60px;*/
               left: 50%;
               top: 50%;
               margin-left: -25%;
               margin-top: -25%;
               vertical-align: middle;
           }
        </style>
   </head>
   <body>

       <div class="box">
           <div class="row uploadRow"><label>上传背景图</label><input type="file" id="upload"></div>
           <button class="createCode">生成二维码</button><button class="download">下载图片</button>
           </div>
           <div id="myQrCode"><canvas width="256" height="256"></canvas></div>
           <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
           <script src="http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
           <script src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
           <script type="text/javascript">
           var imgData,
                type = 'png';
           $('body').on('change','#upload',function(){
               if ( this.files) {
                        var objUrl = getObjectURL(this.files[0]);
                        if (objUrl) {
                          $('#myQrCode').css('background-image','url('+objUrl+')');
                        }
                    }
           })
           .on('click','.createCode',function(){
               $('canvas').remove();
               $('#myQrCode').qrcode("http://jetienne.com"); //生成二维码
               html2canvas(document.getElementById('myQrCode'), {       //截屏
                    allowTaint: true,
                    taintTest: true,
                    onrendered: function(canvas) {
                        canvas.id = "mycanvas";
                        canvas.style.display = 'none';
                        document.body.appendChild(canvas);
                        //生成base64图片数据

                        imgData = canvas.toDataURL(type);
                        //var newImg = document.createElement("img");
                        //newImg.src = dataUrl;
                        //document.body.appendChild(newImg);
                        //console.log(imgData);


                    }
               });
           })
           //下载
           .on('click','.download',function(){
               if(imgData){
                   var _fixType = function(type) {
                        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                        var r = type.match(/png|jpeg|bmp|gif/)[0];
                        return 'image/' + r;
                   };
                   // 加工image data，替换mime type
                   imgData = imgData.replace(_fixType(type),'image/octet-stream');
                   /**
                   * 在本地进行文件保存
                   * @param {String} data     要保存到本地的图片数据
                   * @param {String} filename 文件名
                   */
                   var saveFile = function(data, filename){
                        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                        save_link.href = data;
                        save_link.download = filename;

                        var event = document.createEvent('MouseEvents');
                        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                        save_link.dispatchEvent(event);
                   };

                   // 下载后的问题名
                   var filename = '商家店铺二维码_' + (new Date()).getTime() + '.' + type;
                   // download
                   saveFile(imgData,filename);
               }
               else{
                   alert('请先生成二维码');
               }


           })
           //获取选择图片之后的blob的文件路径
           var getObjectURL = function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            };


           </script>

<canvas width="600" height="600" id="mycanvas" style="display: none;"></canvas></body></html>