使用 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人已关注
分享到:
赞(7) 打赏

评论7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #5
    很棒棒哦
    海绵2018-10-23 15:20:37回复
    • 海绵也棒棒哒
      小月先生2018-10-26 9:42:52回复
  2. #4
    16年初的时候用过html2canvas.js做一个小项目(固定好的背景,用户自定义上传图片,图片可剪切、缩放、旋转),调研的时候是确实可行的,但是在不同手机上运行产生各种各样的小问题,匆忙上线各种尴尬,哎...17年的时候又接到一个这样的活,最后选用了createjs,本质也是canvas,效果还不错。一个java开发做着前端的活,心累
    Kevin2018-08-23 18:41:34回复
    • Java厉害了, creat.js 这个倒是没用过呢, 我们很少做这种项目, 老板心头一热要啥就的给啥
      小月先生2018-10-26 9:44:43回复
  3. #3
    膜拜大牛.
    看小说吧2018-08-13 13:39:15回复
  4. #2
    学到了,太厉害了
    看小说吧2018-08-13 13:33:32回复
  5. #1
    以后就要常驻这学习了 哈哈哈哈
    达龙2018-07-24 7:02:48回复

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

支付宝扫一扫打赏

微信扫一扫打赏