javascript - 是否可以绘制比当前屏幕更大的 Canvas ？

Question

我正在将图像绘制到 Canvas 上，这样做时图像会缩小到 Canvas 上(这会降低质量)，即使图像与 Canvas 大小相同，那是因为 img 效果很好缩小实际具有更大自然高度和自然宽度的实际 img 的工作。我知道有可能使这种质量更好，但是我不需要实际向用户展示这个 Canvas /不需要缩小比例。因此我想知道是否有任何方法可以绘制比屏幕大的图像并将其固定在某个地方？听说有人在某处提到了一个盒子对象或一个相机对象，但不能真正利用这些信息。

问题，是否可以绘制比屏幕更大的 Canvas ？那怎么办呢？

这是我使用 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

使用离屏 Canvas ，你只需要创建一个新的 Canvas 并相应地设置它的高度和宽度。然后您可以将其附加到元素或将图像导出为 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");