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