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()" \/>`);
      },