使用 html2canvas 实现浏览器截图

基于上一篇《h5 本地上传图片预览 源码下载》，今天分享一个图片上传后， 根据所上传的图片颜值随机生成一个答案， 并且可以生成一张专属于自己的名片。

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

第一步： 下载 html2canvas.js （点击下载）  密码：761e

第二部：引入插件

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

第四部：html2canvas最核心的代码

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

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

提示： h5上传本地预览的url如果不合适， 此插件截图的时候显示空白！但是经过试验上篇文章的方法， 结合这个截图是成功的！

未经允许不得转载