html2canvas图片截屏

最新推荐文章于 2023-10-09 21:18:22 发布

xiao_cheng_

最新推荐文章于 2023-10-09 21:18:22 发布

阅读量264

点赞数

分类专栏： html5 js

本文链接：https://blog.csdn.net/xiao_cheng_/article/details/118308792

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

前言

工作使用到了html2canvas插件，刚开始踩了不少坑，在此记录，引以为戒

单纯使用html2canvas截屏，不下载（以图片为例）

<body>
  <ul id="oUl" style="float: left;">
    <li>
      <button class="screenCapture">截屏</button>
    </li>
    <li><img src="https://picb7.photophoto.cn/03/491/03491637_1.jpg" width="200" height="150" /></li>
    <li><img src="https://picb0.photophoto.cn/39/329/39329210_1.jpg" width="200" height="150" /></li>
    <li><img src="https://picb2.photophoto.cn/37/898/37898422_1.jpg" width="200" height="150" /></li>
    <li><img src="https://pic32.photophoto.cn/20140914/0005018405154000_b.jpg" width="200" height="150" /></li>
    <li><img src="https://picb2.photophoto.cn/37/241/37241172_1.jpg" width="200" height="150" /></li>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>
  var oUl = document.getElementById("oUl");
  $(".screenCapture").on("click", function(event) {
        event.preventDefault();
        html2canvas(oUl,{
          // useCORS: true,是否尝试使用 CORS 从服务器加载图像(自己测试的时候把该参数注释了也没出错，但是之前截屏时图片无法显示出来，上网搜的解决办法好多都跟他类似，网上搜的写法为setAttribute("crossOrigin",'Anonymous')，但此之前也没解决掉我的问题)
          /* width: window.screen.availWidth,
          height: window.screen.availHeight,
          windowWidth: document.body.scrollWidth,
          windowHeight: document.body.scrollHeight,
          x: 0,
          y: window.pageYOffset, //这也是看的有位兄台说当页面有滚动条时截屏，会显示出来大片空白的解决办法，但我自己没遇到此问题。个人感觉这些参数一般来说可能不太用得到*/
          allowTaint: true,  //是否允许跨域图像污染画布(此参数很重要，注释的话会导致图片无法显示(也可能是截屏的时候没截到))
          taintTest: false,//在渲染前测试图片(官网没看到这个参数，参考的其他兄台的帖子)
        }).then(function(canvas) {
          // canvas.style.marginLeft = "250px";
          document.body.appendChild(canvas);
        }); 
      }); 
</script>
  
</body>

截屏效果：

在这里插入图片描述
参考链接：
https://www.cnblogs.com/xiaokebb/p/8946777.html
https://blog.csdn.net/PT1993/article/details/90311409

使用html2canvas截屏并下载报错了o(╥﹏╥)o哪位大神可以指点一下

报错：Uncaught (in promise) DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported
看了下方两篇文章依旧没有成功
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
代码如下：

var oUl = document.getElementById("oUl");
  $(".screenCapture").on("click", function(event) {
        event.preventDefault();
        html2canvas(oUl,{
          useCORS: true,
          allowTaint: true,  
          taintTest: false,
        }).then(function(canvas) {
          document.body.appendChild(canvas);
          var oCanvas = document.getElementsByTagName('canvas')[0];
          var dataURL = oCanvas.toDataURL('image/jpeg', 1.0);
          download(dataURL);
        });
      }); 
      function download(dataURL) {
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.innerHTML = '下载按钮';
        a.download = 'downloadCanvasImage.png';
        a.href = dataURL;
        a.click();
      };

总结

xiao_cheng_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html2canvas图片截屏

前言工作使用到了html2canvas插件，刚开始踩了不少坑，在此记录，引以为戒一、pandas是什么？<button class="screenCapture">截屏</button> <ul id="ul1"> <li> <img src="img/3.jpg" width="200" height="150" /> </li> <li> &
复制链接

扫一扫