js转换页面为图片并下载

 1 <div style="background:red;width: 600px;height: 600px;" class="test">
 2     <div id="imgs" style="background:green;">
 3         <div style="background:blue;">
 4             <div style="background:yellow;">
 5                 <div style="background:orange;">
 6                     33333333333333333333333333333333
 7                 </div>
 8             </div>
 9 
10         </div>
11 
12     </div>
13 </div>
14 <h2 class="toCanvas"> <a href="javascript:void(0);"> 转成canvas </a></h2>
15 <h2 class="toPic"><a href="javascript:void(0);"> 转成图片 </a></h2>
16 <h5>
17     <label for="imgW">宽度:</label>
18     <input type="number" value="" id="imgW" placeholder="默认是原图宽度" />
19     <label for="imgH">高度:</label>
20     <input type="number" value="" id="imgH" placeholder="默认是原图高度" />
21     <label for="imgFileName">文件名:</label>
22     <input type="text" placeholder="文件名" id="imgFileName" />
23     <select id="sel">
24         <option value="png">png</option>
25         <option value="jpeg">jpeg</option>
26         <option value="bmp">bmp</option>
27     </select>
28     <button id="save">保存</button>
29 </h5>

 1 * {
 2         margin: 0;
 3         padding: 0;
 4     }
 5 
 6     div {
 7         padding: 20px;
 8         border: 5px solid black;
 9     }
10 
11     h2 {
12         background: #efefef;
13         margin: 10px;
14     }
15 
16     .toPic {
17         display: none;
18     }

 1 var test = $("#imgs")[0]; //将jQuery对象转换为dom对象
 2         // 点击转成canvas
 3         $('.toCanvas').click(function(e) {
 4             // 调用html2canvas插件
 5             html2canvas(test).then(function(canvas) {
 6                 // canvas宽度
 7                 var canvasWidth = canvas.width;
 8                 // canvas高度
 9                 var canvasHeight = canvas.height;
10                 // 渲染canvas
11                 $('.toCanvas').after(canvas);
12                 // 显示‘转成图片’按钮
13                 $('.toPic').show(1000);
14                 // 点击转成图片
15                 $('.toPic').click(function(e) {
16                     // 调用Canvas2Image插件
17                     var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
18                     // 渲染图片
19                     $(".toPic").after(img);
20                     // 点击保存
21                     $('#save').click(function(e) {
22                         let type = $('#sel').val(); //图片类型
23                         let w = $('#imgW').val(); //图片宽度
24                         let h = $('#imgH').val(); //图片高度
25                         let f = $('#imgFileName').val(); //图片文件名
26                         w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值
27                         h = (h === '') ? canvasHeight : h;
28                         // 调用Canvas2Image插件
29                         Canvas2Image.saveAsImage(canvas, w, h, type, f);
30                     });
31                 });
32 
33 
34             });
35         });

//demo地址:https://files.cnblogs.com/files/Zhushaoyu/html_img.zip

转载于:https://www.cnblogs.com/Zhushaoyu/p/10531380.html