Question

我在我的网络应用程序中使用一个画布，它的实际高度和宽度是500px。我在屏幕上显示这个画布为500px正方形但我希望从这个画布导出的图像为1600px正方形。我试过下面的代码没有运气。

canvas.width = 1600;
canvas.style.width = 500;

任何帮助将不胜感激。

Answer 1

HTML

<canvas width="1600px" height="1600px" > </canvas>

CSS

canvas{
   position :absolute;
   transform:scale(0.3125);
   left:-500px; //adjust
   top:-350px; //adjust
}

使用transform：scale（）调整画布大小

现在1600 * 1600将是画布的实际尺寸，因此您可以直接从画布中导出图像

但是在视图中它显示为500px * 500px因为它缩小了，它在导出时不会影响图像质量

Answer 2

诚实的回答：你做不到。

如果你这样做了，那么你已经找到了一种无损压缩数据的方法，其数据不到原始大小的1/9，并且没有任何编码，这无疑是不可能的。

你可以做的是以至少不会模糊的方式进行扩展。要做到这一点，您需要最终图像是上一个画布的整数倍，因此浏览器不会应用消除锯齿。或者如果你想使用你自己的复制公式putImageData来摆脱抗锯齿，你仍然会得到各种不一致的东西，而且会很慢

在您的情况下，您可以获得的最接近的是1500x1500（3 * 500x3 * 500）。如果你的观点是处理一个图像，你就不幸运了，但如果你只想展示足够好的东西，你可以采用各种其他技巧，例如将画布居中并使用像box-shadow这样的属性来制作它清楚它与屏幕的其余部分是分开的

Answer 3

您可以将画布显示为500px，同时仍具有1600px的分辨率。显示尺寸和分辨率是独立的。对于分辨率，您可以设置画布宽度和高度属性。对于显示尺寸，您可以设置画布样式宽度和高度属性。

// create a canvas or get it from the page
var canvas = document.createElement("canvas");
// set the resolution (number of pixels)
canvas.width = canvas.height = 1600;
// set the display size
canvas.style.width = canvas.style.height = "500px";
// get the rendering context
var ctx = canvas.getContext("2d");

要使渲染与显示尺寸相匹配，您需要放大所有渲染。您可以通过将变换比例设置为画布分辨率除以显示大小

来完成此操作

var scale = 1600 / 500; // get the scale that matches display size 
ctx.setTransform(scale,0,0,scale,0,0);

现在，当您渲染到画布时，您将使用屏幕尺寸坐标。

ctx.fillRect(0,0,500,500); // fill all of the canvas.
ctx.fillStyle = "red";  // draw a red circle 100 display pixels in size.
ctx.beginPath();
ctx.arc(250,250,100,0,Math.PI * 2);
ctx.fill();

当你保存画布时，你使用的任何方法，只要它不是屏幕截图，保存的画布将是1600乘1600，所有渲染将是正确的位置和比例

如何从较小的画布获得高分辨率图像？

3 个答案: