html2Canvas截图不清晰

最新推荐文章于 2024-07-25 16:02:31 发布

fc1904

最新推荐文章于 2024-07-25 16:02:31 发布

阅读量3.8k

点赞数

分类专栏：项目实践技术笔记文章标签： canvas 截图 js html2canvas

本文链接：https://blog.csdn.net/qq_36459098/article/details/79803280

版权

项目实践同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

技术笔记

4 篇文章 0 订阅

订阅专栏

//这里用的是0.5的版本，另源码有修改，已提交至网盘，指路下载：

链接:https://pan.baidu.com/s/1kQeIbk7isDilN9kkSH_1oA 密码:tsqk


var utils  = {
    complete(completeBase) {      
      let canvas = document.createElement("canvas"),
        width = document.querySelector(".toCanvas").offsetWidth,
        height = document.querySelector(".toCanvas").offsetHeight,
        context = canvas.getContext("2d"),
        scale = this.getPixelRatio(context);
      canvas.width = width * scale;//设置放大倍数,保证清晰度
      canvas.height = height * scale;//设置放大倍数,保证清晰度
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      context.scale(scale, scale);//设置放大倍数与上面的宽高对应
      html2canvas(document.querySelector(".toCanvas"), {
        logging: true,
        // allowTaint: true, //
        tainttest: true, //在渲染前测试图片(没整明白有啥用)
        useCORS: true, //使用跨域(如果有跨域的话必须必须必须带着!)
        background: "#fff",
        canvas: canvas,
        scale: scale,
        onrendered: function(canvas) {
          let dataURL;
           //转出来的png的长度太长，而app同事又不支持jpeg的怎么办呢，采用欺骗的方法啦，先转成jpeg的再把头部替换成png的，反正我们只是要用来分享，?
          dataURL = canvas.toDataURL("image/jpeg");
          dataURL = dataURL.replace(/data:image\/jpeg/i, "data:image/png");
        }
      });
    },
    //获取像素密度
    getPixelRatio: function(context) {
      var backingStore =
        context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio ||
        1;
      return (window.devicePixelRatio || 1) / backingStore;
    },
}