Как я могу получить изображение с высоким разрешением из меньшего холста?

Question

Я использую один холст в своем веб-приложении, и фактическая высота и ширина - 500 пикселей. Я показываю этот холст на экране размером 500 пикселей, но я хочу, чтобы изображение было экспортировано с этого холста размером 1600 пикселей. Я пробовал под кодом без везения.

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

Любая помощь будет оценена по достоинству.

Answer 1

Вы можете иметь отображение холста с разрешением 500 пикселей при разрешении 1600 пикселей. Размер и разрешение дисплея независимы. Для разрешения вы задаете свойства ширины и высоты холста. Для размера дисплея вы устанавливаете холст стиль свойства ширины и высоты.

// 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 и все будет одинаково правильно позицией и пропорциональную

Answer 2

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 уменьшено, доза не влияет на качество изображения при экспорте

Answer 3

Честный ответ: вы не можете.

Если вы сделали, то вы бы нашли способ без потерь сжатия данных с менее чем 1/9 от исходного размера, и без какого-либо кодирования, что неоспоримо невозможно.

Что вы можете сделать, это масштабировать его таким образом, чтобы он по крайней мере не размывался. Для этого вам нужно, чтобы конечное изображение было целым числом, кратным предыдущему холсту, поэтому браузер не будет применять сглаживание. Или, если вы хотите использовать свою собственную формулу копирования с putImageData, которая избавится от сглаживания, вы все равно получите различные инконгруэнсы, и это будет очень медленно.

В вашем случае, ближайший вы можете получить 1500x1500 (3 * 500x3 * 500). Если вы хотите обработать изображение, вам не повезло, но если вы просто хотите отобразить что-то достаточно хорошее, вы можете прибегнуть к другим трюкам, таким как центрирование холста и использование таких свойств, как box-shadow, чтобы было ясно, что это отдельно от остальной части экрана