canvans将div或table内容转化成图片并下载保存
直接线上完成整代码：
<html> <head> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="js/html2canvas.js"></script> </head> <body> <div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;padding-right: 25px;padding-bottom: 15px;margin-bottom:15px;"> 我真的很喜欢你呢 </div> <input id="btn-Preview-Image" type="button" value="预 览"/> <a id="btn-Convert-Html2Image" href="#">下载</a> <br/> <h3>预 览 :</h3> <!--这里面好像要预览才能下载--> <script> $(document).ready(function(){ var element = $("#html-content-holder"); // global variable var getCanvas; // global variable $("#btn-Preview-Image").on('click', function () { html2canvas(element, { onrendered: function (canvas) { $("#previewImage").append(canvas); getCanvas = canvas; } }); }); $("#btn-Convert-Html2Image").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData); }); }); </script> </body> </html>
这里是参考了以为博主的文章【JQuery插件】把网页或某div或table表格内容转为图片并下载 - html技术_卡卡网 (webkaka.com)
西药注意的是要下载html2canvans.js这个文件然后在集成到自己的代码中的时候注意，script里面的代码最好直接放在按钮或者input的紧后面不然会出现预览之后下载没反应，注意预览之后图片的信息才回转码数据才有，这里要先预览才能下载图片，应该是代码的逻辑，太乱了就不想改了
