js实现html页面转图片，并保存图片在本地，实现原理为（html转canvas、canvas转image）
需要的库：canvas2image.js下载地址：/SuperAL/canvas2image；
需要的库：html2canvas.js下载地址：/dist/html2canvas.min.js
效果如下：
首先是html页面:
<head><meta charset="utf-8"><meta name="viewport" content="width=320,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><title>实现HTML转图片</title><style type="text/css" media="screen">.bg{width: 100%;min-height: 100%;height: 100vh;background-color: #a799ac;text-align: center;}.text{width: 50%;margin-top: 20%;height: 25px;border: 1px solid #b7c092;border-radius: 10px;outline: none;}.save, .picture{border-radius: 10px;border: none;width: 60px;padding: 0;height: 25px;background: #9cd8b1;outline: none;}.title{/* margin-top: 100px; */}.need{/* background: url(20.jpg) no-repeat; */background-size: 400px;background: linear-gradient(#3793b6, #c993d3);}img{margin-top: 50px;width: 100%;height: 200px;}</style></head><body style="padding: 0;margin: 0;"><div class="bg"><input type="input" name="姓名" class="text" placeholder="输入姓名"><button type="button" class="save">确认</button><button type="button" class="picture">生成图片</button><div class="need" style="height: 200px;width: 400px"><p class="title" style="color: white">hello</p><p class="area" style="color: white">欢迎，这里是你需要截取到的区域</p></div></div></body>
有了页面我们就开始html到图片的转换逻辑;
首先在页面中引入我们需要用的js文件
<script src="/jquery-3.1.1.min.js"></script><script src="/dist/html2canvas.min.js" type="text/javascript" charset="utf-8" async defer></script><script src="canvas2image.js" type="text/javascript" charset="utf-8" async defer></script>// 我已经将canvas2image.js放到工程目录，所以这里直接引用即可
然后编写我们的逻辑代码,因为代码中我已经给出了详细注释，所以就不累述了
代码如下：
var text=$(".text").val();var info=$(".title");var save = $(".save");let w = $(window).width(); //图片宽度let h = $(window).height(); //图片高度console.log(w+" "+h);save.click(function(e){// 获取输入框内容var text=$(".text").val();// 控制台输出，一般用于测试时开效果，实际项目不需要console.log(text);// 非空判断 if(!text)return;else // 不为空则加载到页面info.text(text);});var need = $(".need").get(0); //将jQuery对象转换为dom对象function getOS() {// 获取当前操作系统var os;if (navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1) {os = 'Android';} else if (navigator.userAgent.indexOf('iPhone') > -1||navigator.userAgent.indexOf('iPad') > -1) {os = 'iOS';} else if (navigator.userAgent.indexOf('Windows Phone') > -1) {os = 'WP';} else {os = 'Others';}return os;}console.log("操作系统"+getOS());// 点击转成canvas，最后用于生成图片$('.picture').click(function(e) {// 调用html2canvas插件html2canvas(need).then(function(canvas) {// canvas宽度var canvasWidth = canvas.width;// canvas高度var canvasHeight = canvas.height;// 控制台查看绘制区域的宽高console.log(canvasWidth+" "+canvasHeight);// 渲染canvas，这个时候将我们用于生成图片的区域隐藏$(".need").hide();// 下面注释内容为测试内容，测试时可以去掉注释，方便查看生成的canvas区域// $(".need").after(canvas);// 调用Canvas2Image插件let w = $(window).width(); //图片宽度// let h = $(window).height(); //图片高度// 这里因为我们生成图片区域高度为400，所以这里我们直接指定let h = 400;// 将canvas转为图片var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);// 渲染图片，并且加到页面中查看效果$(".need").after(img);// 保存let type = "png"; //图片类型let f = "DNF"; //图片文件名，自定义名称// w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值// h = (h === '') ? canvasHeight : h;// 这里的判断用于区分移动端和pc端if(getOS()=="Others"){// 调用Canvas2Image插件Canvas2Image.saveAsImage(canvas, w, h, type, f);}});});
注意一：
代码最后之所以要区分移动端与pc端，是因为在测试过程中发现，在pc端时，花括号内的代码执行有效，可以弹出提示让你保存图片到本地，当在移动端时，此方法会出现bug,因为图片采用的是base64格式，浏览器无法解析，就会导致页面跳转，无法保存图片，所以上面程序中加上区分后，不在移动端弹出保存到本地，因为移动端本身可以对长按图片保存有很好的支持，所以这部分代码就不需要了；经测试在iOS和Android上都是有效的，只要长按生成的图片就可以报讯到本地；
注意二：
细心的同学会发现我在开始的样式文件中注释掉了一个图片：
.need{/* background: url(20.jpg) no-repeat; */background-size: 400px;background: linear-gradient(#3793b6, #c993d3);}
因为在我们的业务中，我们可能是有背景图的，然后加上一些业务信息一起生成一张图片，当我们加上了背景图片后，代码在本地运行时会报错，原因是当我们保存图片时，会产生canvas2image报的跨域错误，这个问题也很好解决，只要我们将项目放在线上测试就不会有问题了，不要在本地测试就行，比如发布到GitHub上进行托管，然后在线上查看效果就不会有问题了，我是将图片放在了根目录下上传到GitHub的，不知道如果是图片外链形式会不会有问题，欢迎同学们尝试，留言你的建议核问题；
