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

我在我的web应用中使用了一个画布，它的实际高度和宽度都是500px。我在屏幕上显示这个画布为500px正方形，但是我想要从这个画布导出的图像为1600px正方形。我已经尝试了下面的代码没有运气。如何从较小的画布获得高分辨率图像？

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

任何帮助将不胜感激。

来源

2017-02-15 Nikunj Sardhara

您可以将画布显示为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，并在所有的渲染将是正确的位置和比例

来源

2017-02-15 07:42:56 Blindman67

它对我的POC起作用。我将准备我的整个解决方案。 –

HTML

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

CSS

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

使用变换：规模（）来调整大小画布的

现在1600 * 1600将是你的画布的实际大小，所以您可以直接从您的画布导出图像

但在视图中显示为500px * 500px bea cuse它的缩小，它不影响图像质量，而出口

来源

2017-02-15 06:56:41 Sajan

没有，那不是我想要的，我想你误解了。 –

我希望我的画布在屏幕上看起来更小（500x500），但是当我从该画布导出图像时，它应该更大（1600x1600），这就是我想要的，画布看起来很小，但我不想缩放它。 –

我添加了一些细节，请现在检查，实际上，画布尺寸仍然保持为1600 * 1600，并缩小到500 * 500的视野。 – Sajan

诚实的答案：你不能。

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

你可以做的是扩大它的方式，至少不会模糊。要做到这一点，你需要最终的图像是前一个画布的整数倍，所以浏览器不会应用反锯齿。或者如果你想使用putImageData自己的复制公式来消除反走样，你仍然会得到各种不一致的情况，并且它会很慢

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

来源

2017-02-15 07:20:01 towc

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

回答

相关问题