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

Question

I am using one canvas in my web app and it's actual height and width are 500px. I am showing this canvas on screen as 500px square but i want image exported from this canvas as 1600px square. I have tried below code with no luck.

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

Any help will be appreciated.

Answer 1

HTML

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

CSS

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

Use transform:scale() to adjust size of your canvas

Now 1600 * 1600 will be the actual size of your canvas, so you can directly export images from your canvas

But in view it show as 500px * 500px beacuse it's scaled down, it dose not affect the image quality while exporting

Answer 2

Honest answer: you can't.

If you did, then you'd have found a way to losslessly compress data with less than 1/9th of the original size, and without any encoding, which is unarguably impossible.

What you can do is scale it up in a way that it at least doesn't get blurry. To do that, you need the final image to be an integer multiple of the previous canvas, so the browser won't apply anti-aliasing. Or if you want to use your own copying formula with putImageData that would get rid of anti-aliasing, you'll still get various incongruences and it would be very slow

In your case, the closest you could get is 1500x1500 ( 3*500x3*500 ). If your point was to process an image, you're not in luck, but if you just want to display something good enough, you can resort to various other tricks such as centering the canvas and using properties like box-shadow to make it clear that it's separate from the rest of the screen

Answer 3

You can have the canvas display at 500px while still having a resolution of 1600px. Display size and resolution are independent. For resolution you set the canvas width and height properties. For display size you set the canvas style width and height properties.

// 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");

To get the rendering to match the display size you need to scale up all rendering. You can do this by setting the transform scale to the canvas resolution divided by the display size

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

Now when you render to the canvas you use the screen size coordinates.

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();

When you then save the canvas, what ever method you use as long as it is not screen capture the saved canvas will be 1600 by 1600 and all the rendering will be correctly positions and proportional