使用 html2canvas 实现浏览器截图

使用 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如果不合适, 此插件截图的时候显示空白!但是经过试验上篇文章的方法, 结合这个截图是成功的!

未经允许不得转载:小月博客 » 使用 html2canvas 实现浏览器截图
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏