保存指定DOM为图片

1.引入一个js html2canvas.js，已上传我的资源

https://download.csdn.net/download/qq_21987433/12153897

2.html DOM提供

   

                

        
                

                
家庭收入和财产核查授权委托书
                
本人 <{$hu.family_username}>  具有完全民事行为能力，是我们全家共同推荐的申请人，其申请和申报行为代表我们全家的共同决定。
                
特此委托。
                
全体家庭成员
                
                    <{foreach from=$familyList item="item" key="key"}>
                    
                    <{/foreach}>
                

                    

                        
序号
                        
姓名
                        
身份证号
                        
与户主关系
                    

                        
<{$key+1}>
                        
<{$item.family_username}>
                        
<{$item.family_idno}>
                        
<{$item.family_relation}>
                    

                
声明及授权

                
1、本人承诺本家庭日常生活水平低于所要申请社会救助标准，且家庭成员收入及家庭资产未超出所要申请社会救助标准。
                
2、本人及家庭成员了解陕西省社会就助申请政策，在申报表格中所填写的家庭成员、家庭收入、家庭财产等情况属实。所提交的本人及家庭成员的相关证明材料真实有效，如有虚假、隐瞒，愿停止申请或停止享受社会救助待遇，并承担相应法律责任。
                
3、本人授权并配合政府相关部门对本人及家庭成员的户籍、婚姻、收入、房屋产权、银行存款、有价证券、保险、住房公积金、工商税务登记、机动车辆等相关信息进行核查，包括入户调查。
                
委托人(签字)：
                
<{$signY}>年<{$signM}> 月<{$signD}> 日 
        

3.JS调用将DOM转为图片，base64

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: '<{$ask_id}>',
                                groupid: '<{$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);
                            }
                        })
                }
                    });
                }

4.图片压缩

 /* 
            * 图片压缩
            * 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;
            }