js实现html截图生成图片

Posted 2020-11-07 高丰鸣

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

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

　  想必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>