美文网首页
html2canvas怎么截取可视区域,其他隐藏部分(仅限Y轴之

html2canvas怎么截取可视区域,其他隐藏部分(仅限Y轴之

作者: 阿克兰 | 来源:发表于2022-02-24 09:56 被阅读0次
 // 获取滚动距离
    getPageScroll() {
      var xScroll, yScroll;
      if (self.pageYOffset) {
        yScroll = self.pageYOffset;
        xScroll = self.pageXOffset;
      } else if (
        document.documentElement &&
        document.documentElement.scrollTop
      ) {
        // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
        xScroll = document.documentElement.scrollLeft;
      } else if (document.body) {
        // all other Explorers
        yScroll = document.body.scrollTop;
        xScroll = document.body.scrollLeft;
      }
      let arrayPageScroll = new Array(xScroll, yScroll);
      return arrayPageScroll;
    },
    // 屏幕截屏
    cutScreen() {
     //可视区域的高度
      let height =
        document.documentElement.clientHeight == 0
          ? document.body.clientHeight
          : document.documentElement.clientHeight;

      let length = this.getPageScroll()[1];
      try {
       
        let test = document.getElementById("cutImg");
        html2canvas(test, {
          width: test.clientWidth, //DOM原始宽度
          height: height,
          y: length, //canvas开始的的Y坐标
          scrollY: length,// 滚动
          tainttest: false,
          allowTaint: true,
          useCORS: true,
          scale: window.devicePixelRatio  // 可以避免模糊
        }).then(canvas => {
          // 转成图片,生成图片地址
        let  imgUrl = canvas.toDataURL("image/png");
        });
      } catch (e) {
        console.log(e);
      }
    }

相关文章

网友评论

      本文标题:html2canvas怎么截取可视区域,其他隐藏部分(仅限Y轴之

      本文链接:https://www.haomeiwen.com/subject/kelxrrtx.html