指定DOMをピクチャとして保存

   

                

        
                
                
              
                
               ，             ，                   。
                
    。
                
      
                

                
     

                
1、                         ，                         。
                
2、                    ，              、    、         。                      ，    、  ，                ，         。
                
3、                        、  、  、    、    、    、  、     、      、             ，      。
                
   (  )：
                
      
        

function saveAuthBook() {
                    if (!$("#imgBox").html()) {
                        alert("     ");
                        return false;
                    }
                    window.pageYOffset = 0;
                    document.documentElement.scrollTop = 0
                    document.body.scrollTop = 0
                    var canvas2 = document.createElement("canvas");
                    let _canvas = document.querySelector('#Authbook');
                    var w = parseInt(window.getComputedStyle(_canvas).width);
                    var h = parseInt(window.getComputedStyle(_canvas).height);
                    // canvas       ，           ，       
                    canvas2.width = w * 2;
                    canvas2.height = h * 2;
                    canvas2.style.width = w + "px";
                    canvas2.style.height = h + "px";
                    //         ， context     ,translate         
                    var context = canvas2.getContext("2d");
                    context.scale(2, 2);
                    html2canvas(document.querySelector('#Authbook'), { canvas: canvas2 }).then(function (canvas) {
                        var data = canvas.toDataURL();//     
                        var image = new Image();
                        image.src = data;
                        image.onload = function () {
                        var width = this.width;
                        var height = this.height;
                        var img64 = compress(image, width*0.5, height*0.5, 0.6);
                        $("#loadingToast").fadeIn(100);

                        $.ajax({
                            type: 'post',
                            url: 'index.php?action=confirm',
                            data: {
                                ask_id: '',
                                groupid: '',
                                imgdata: img64,
                            },
                            async: true,
                            success: function (jsonData) {
                               // alert(JSON.stringify(jsonData));
                                var jsonData = JSON.parse(jsonData);
                                if (jsonData.state == 1) {
                                    location.href = 'index.php?action=success';
                                } else {
                                    alert(jsonData.msg + ',   ');
                                }
                            },error:function(err){
                                var errs=JSON.stringify(err);
                                alert(errs);
                            }
                        })
                }
                    });
                }

 /* 
            *     
            * img        
            * width         
            * height        
            * ratio        
            */
            function compress(img, width, height, ratio) {
                var canvas, ctx, img64;

                canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;

                ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, width, height);

                img64 = canvas.toDataURL("image/jpeg", ratio);

                return img64;
            }