使用 html2canvas 实现浏览器截图

首先上传预览我们终于实现了， 所以接下来我们只应该实现浏览器截图功能就可以了。 目前最流行的需要是 html2canvas.js 了，很多微信上面测试小游戏都是用的这个软件写的。 因为比较的简洁容易操作。所以现在哦我们也一起分享一下如何使用html2canvas实现浏览器截图。

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery2.2.4.min.js"></script> //基于jq的，所以需要引入jq

<div class="pageTwo">
    <!--  要截图的区域，因为是动态生成的答案， 所以写入了js -->
    <div class="con01" id="con"></div> 
    
    <!--截图生成图片所存放的url-->   
    <img id="screenShotImg" class="pic">
    <!--  截图按钮  -->
    <img src="img/share_press.png" class="share" /> 
    <p class="share_txt">长按保存，分享朋友圈引爆颜值暗战！</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        document.querySelector('.share').onclick = function(){   
                  html2canvas(document.querySelector("#con")).then(function (canvas) {
                  //获取截取图片路径
                  var base64Url = canvas.toDataURL('image/png');
                  //存入页面指定位置
                  document.getElementById("screenShotImg").src = base64Url;
                  //后台操作处理
                  var base64 = "<img src=" + base64Url + " />"
                  $('.share').css('display','none');
                  $('.share_txt').css('display','block');
               });
        }
    });
</script>

执行完如上的代码html2canvas 截图保存， 就可以生成你想要区域的图片了！

提示： h5上传本地预览的url如果不合适，此软件图片的之后显示空白！但是经过实验后记文章的方式html2canvas 截图保存， 结合这个图片是成功的！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-121982-1.html