html2canvas图片清晰度

版权声明:任先阳 任 先 阳 任先 先阳,nvcc.cc、www.nvcc.cc、sbfox.com、www.sbfox.com https://blog.csdn.net/qq_39571197/article/details/83145421

事实上我发现高度不用处理

在一个烦躁的时刻,突然要实现一个打印功能,最后决定生成图片打印~

结果图片果然不清晰(放心早知道有这个坑了~),

说了比较烦躁,网上教程也静不下来心看,依稀看到说生成canvas时,进行放大, 

然后就放大scale倍呗,恩,然后就成了。。。

理论上清晰度、生成时长与scale成正比·

事后,看了看这篇文章,https://segmentfault.com/a/1190000011478657

与大多数教程一样,不知为什么要创建canvas,给html2canvas使用,也许有隐藏彩蛋,这得我看了文档之后才能知道。

理论上这个有用,我也复制到自己的代码里了~

在新窗口打印,并删除iframe,因为print是个同步操作,所以关闭print面板之后才能看到iframe节点被删除

methods: {
      print() {
        const dom = this.$refs['order'];
        const scale = 3;
        html2canvas(this.$refs['order'], {
          scale,
          width: dom.offsetWidth * scale,
          height: dom.offsetHeight * scale,
        }).then(canvas => {
          const context = canvas.getContext('2d');
          // 【重要】关闭抗锯齿 https://segmentfault.com/a/1190000011478657
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;
          //处理canvas,例如加水印
          //完成canvas
          const src64 = canvas.toDataURL();
          this.print2(src64, canvas, scale);
        });
      },
      print2(src64, canvas, scale) {
        const iframe = document.createElement('iframe');
        iframe.id = 'order' + this.order.id;
        document.body.appendChild(iframe);
        iframe.contentWindow.document.write(`
          <style>html{width: 180px;}<\/style>
          <script>
          const oid = ${this.order.id};
          function main(){
            window.print();
            window.parent.window.document.body.removeChild(window.parent.window.document.getElementById('order' + oid));
          }
          <\/script>
          <img src="${src64}" width="${canvas.width / scale}" onload="main()" \/>`);
      },

 

阅读更多

没有更多推荐了,返回首页