一、html转canvas
需要的库html2canvas.js
和canvas2image.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <h2>原始HTML</h2> <div style="background:red;width: 600px;" class="test"> <div style="background:green;"> <div style="background:blue;"> <div style="background:yellow;"> <div style="background:orange;"> 33333333333333333333333333333333 </div> </div> </div> </div> </div> <h2 class="toCanvas"> <a href="javascript:void(0);"> 转成canvas </a></h2> <h2 class="toPic"><a href="javascript:void(0);"> 转成图片 </a></h2> <h5> <label for="imgW">宽度:</label> <input type="number" value="" id="imgW" placeholder="默认是原图宽度" /> <label for="imgH">高度:</label> <input type="number" value="" id="imgH" placeholder="默认是原图高度" /> <label for="imgFileName">文件名:</label> <input type="text" placeholder="文件名" id="imgFileName" /> <select id="sel"> <option value="png">png</option> <option value="jpeg">jpeg</option> <option value="bmp">bmp</option> </select> <button id="save">保存</button> </h5> |
js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript" src="html2canvas.min.js"></script> <script type="text/javascript" src="canvas2image.js"></script> <script type="text/javascript"> var test = $(".test").get(0); //将jQuery对象转换为dom对象 // 点击转成canvas $('.toCanvas').click(function(e) { // 调用html2canvas插件 html2canvas(test).then(function(canvas) { // canvas宽度 var canvasWidth = canvas.width; // canvas高度 var canvasHeight = canvas.height; // 渲染canvas $('.toCanvas').after(canvas); // 显示‘转成图片’按钮 $('.toPic').show(1000); // 点击转成图片 $('.toPic').click(function(e) { // 调用Canvas2Image插件 var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight); // 渲染图片 $(".toPic").after(img); // 点击保存 $('#save').click(function(e) { let type = $('#sel').val(); //图片类型 let w = $('#imgW').val(); //图片宽度 let h = $('#imgH').val(); //图片高度 let f = $('#imgFileName').val(); //图片文件名 w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空,为空时保持原来的值 h = (h === '') ? canvasHeight : h; // 调用Canvas2Image插件 Canvas2Image.saveAsImage(canvas, w, h, type, f); }); }); }); }); </script> |
html2canvas.js和canvas2image.js的下载地址:
html2canvas.js:http://html2canvas.hertzen.com/dist/html2canvas.min.js
canvas2image.js:https://github.com/SuperAL/canvas2image
github
---------------------
作者:caomage
来源:CSDN
原文:https://blog.csdn.net/caomage/article/details/81168201
版权声明:本文为博主原创文章,转载请附上博文链接!