接上一篇,截取隐藏域图片,截图出现图片模糊,处理函数如下
toImage() {
let _canvas = this.$refs.imageWrapper;
let canvas2 = document.createElement("canvas");
let w = parseInt(window.getComputedStyle(_canvas, null).width);
let h = parseInt(window.getComputedStyle(_canvas, null).height);
//将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
let scaleBy = 2;
canvas2.width = w * scaleBy;
canvas2.height = h * scaleBy;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
let context = canvas2.getContext("2d");
context.scale(scaleBy, scaleBy);
/*let width = _canvas.offsetWidth;
let height = _canvas.offsetHeight;
let offsetTop =0;// _canvas.offsetTop;
let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');
let scaleBy = 2; //放大倍数
canvas.width = width * scaleBy;
canvas.height = (height + offsetTop) * scaleBy;
context.scale(scaleBy, scaleBy);*/
html2canvas(this.$refs.imageWrapper, {
canvas: canvas2,
useCORS: true,
scale: 1,
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
this.dataURL = dataURL;
this.shareDialogVisible = true;
this.isShowShare = false;
});
}
上一篇:Vue html2canvas截图 图片空白(一)