Question

我正在将图像绘制到画布上，当这样做时，图像会缩小到画布（这会使其失去质量），即使图像与画布的大小相同，那是因为img做得很好工作缩小实际img，实际上有更大的自然高度和自然宽度。我知道有可能使这种质量更好的方法，但是我不需要向用户显示这个画布/不需要缩小尺寸。因此我想知道是否有任何方法可以绘制比屏幕更大的绘图并将其保存在某个地方？听到有人在某处提到了一个盒子对象或一个相机对象但却无法真正使用这些信息。

问题，是否可以绘制比屏幕更大的画布？在那种情况下如何？

这是我正在使用atm的代码

var image = document.getElementById('insertedImg');
var height = $("#insertedImg").height();
var width = $("#insertedImg").width();
var c=document.getElementById("canvass");
var ctx=c.getContext("2d");
c.height=height;
c.width=width;
ctx.drawImage(image,0,0,width,height);

Answer 1

使用屏幕外画布，您只需创建一个新画布并相应地设置其高度和宽度。然后，您可以将其附加到元素或将图像导出为base64字符串或您需要的任何内容。

//canvas is not visible unless appended to a DOM element
var canvas = document.createElement('canvas');
canvas.width = $("#insertedImg").height();
canvas.height = $("#insertedImg").width();
var ctx = canvas.getContext('2d');

//do the drawing, etc.
ctx.drawImage(...);

//export the image
var img = canvas.toDataURL("image/png");

是否可以绘制比当前屏幕更大的画布？

1 个答案: