js实现html截图生成图片

　  没有华丽的开场，直入主题，这就是题主随笔风格。随笔既是平常工做积累，也可理解是个工做笔记，方便往后用到之处快速的有方可寻。

　  先讲一个需求场景： 定制网页截图传给服务器端保存，用户关注公众号后自动回复该截图。

　  想必js实现网页截图，你们第一思路是将网页转成canvas再由canvas转成base64图片。没错，个人思路也是这样，在实际开发过程当中各类试错、调研也验证了该方案是最佳最便利的html转图片的方案(确定是！没有之一)。那么方案肯定后，大致的实现思路也就能够往该方向去作了。因为开发时间有限，这里咱们就不本身手写html2canvas的过程了，最快的速度固然是找现成的插件，通过插件之间的对比，不是样式丢失就是图片丢失，算什么截屏啊？

这里给你们推荐一个我用了还不错的插件：html2canvas.js  github连接：https://github.com/niklasvh/html2canvas

　　关键代码：

　　

<!--引入html2canvas库-->
<script src="game/js/html2canvas.min.js"></script>
<script>
    html2canvas(document.body).then(function(canvas) {
    var base64 = canvas.toDataURL("image/png");
        console.log(base64 );//生成本地base64图片
    });
</script>

　　固然，以上还不算个完整的demo！可能有部分朋友会发现截图不完整或者报跨域的错

　　这是由于你页面中本地案例的图片或者其余网络图片和你当前项目不在一个域名下，那怎么解决呢？把网络图片或者不在同一域名下的图片转成base64本地图片，再进行截图。

　　具体方法以下：

<script>
    function Image2Base64(img) {
         var canvas = document.createElement("canvas");
         canvas.width = img.width;
         canvas.height = img.height;
         var ctx = canvas.getContext("2d");
         ctx.drawImage(img, 0, 0, img.width, img.height);
         var dataURL = canvas.toDataURL("image/png");
         return dataURL
     }
</script>