如何根据动态宽度和高度缩放画布

时间:2020-06-21 20:12:36

标签: javascript angular

我正在尝试将html元素另存为图像。我正在使用html2canvas库,但是输出质量不够好,因此我实现了以下代码。

使用此代码,随着我根据html元素的宽度和高度增加画布的宽度和高度,输出会越来越好。但是秤不能正常工作。输出图像是从右侧截取的。

如何根据动态宽度和高度来调整画布的比例。任何帮助将不胜感激-

getImageFromHtml(){
 var div : any = document.querySelector('#textStory');
 var canvas = document.createElement('canvas');

 var width = div.offsetWidth;
 var height = div.offsetHeight;

 canvas.width = width * 2;
 canvas.height = height * 2;
 canvas.style.width = width + 'px';
 canvas.style.height = height + 'px';
 var context = canvas.getContext('2d');
 context.scale(1,1);
      
 html2canvas(div, { canvas: canvas }).then(function(canvas) {
    let storyTextImage = canvas.toDataURL("image/png");
    console.log(storyTextImage)
 });
}

0 个答案:

没有答案
相关问题