39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
### 代码
|
||
```
|
||
var canvas2 = document.createElement("canvas");
|
||
var _canvas = document.getElementById('app');
|
||
var w = parseInt(window.getComputedStyle(_canvas).width);
|
||
var h = parseInt(window.getComputedStyle(_canvas).height);
|
||
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
|
||
var times = 3;
|
||
canvas2.width = w * times * window.devicePixelRatio;
|
||
canvas2.height = h * times * window.devicePixelRatio;
|
||
canvas2.style.width = w + "px";
|
||
canvas2.style.height =h + "px";
|
||
var context = canvas2.getContext("2d");
|
||
context.scale(times, times);
|
||
console.log(canvas2.style.width)
|
||
new html2canvas(document.getElementById('app'), {
|
||
canvas:canvas2,
|
||
allowTaint: true,
|
||
taintTest: true,
|
||
useCORS: true,
|
||
background: null,
|
||
windowWidth:document.body.scrollWidth,
|
||
windowHeight:document.body.scrollHeight,
|
||
x:0,
|
||
y:0
|
||
}).then(canvas => {
|
||
//canvas就是绘制完成的画板对象
|
||
});
|
||
}
|
||
})
|
||
```
|
||
html2canvas与canvas参考文档
|
||
### 重点介绍
|
||
context.scale(x 倍数, y 倍数); //这个是画板放大指定倍数
|
||
canvas2.width = w * times * window.devicePixelRatio; //指定画板宽度
|
||
canvas2.height = h * times * window.devicePixelRatio; //指定画板宽度
|
||
为什么要再乘以window.devicePixelRatio这个其实是设备的dip，canvas设置的宽度是像素 但是页面的单位是px 1px = 1dip 这样就会让页面超出canvas 让截图出现放大 并且显示不完全。
|
||
这就是原因，也是卡了两天的bug。
|