html2canvas手机清晰度,html2canvas图片清晰度

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

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

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

说了比较烦躁，网上教程也静不下来心看，依稀看到说生成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(`

const oid = ${this.order.id};

function main(){

window.print();

window.parent.window.document.body.removeChild(window.parent.window.document.getElementById('order' + oid));

}

<\/script>

`);

},