Изображение resize canvas

Question

Я пытаюсь загрузить изображения и вставить их в коробки различного размера .... Чтобы дать вам представление о том, что делает приложение: Люди загружают изображения и распечатывают их на плакатах.

Например, у нас будет размер плаката 8 "x 10" (живая область), а полный размер - 9,5 "x 11,5", так как минимальный DPI равен 100, мы обычно кратно 8x10 на 100 = 800x1000.

Вот изображение, объясняющее, что у меня есть исходное изображение (http://i.imgur.com/Uds9rcZ.jpg), и оно должно соответствовать соответствующим размерам.

я, возможно, потребуется уточнить это немного, поэтому задавать вопросы, если это необходимо.

Спасибо.

Answer 1

В контексте canvas context.drawImage есть версия, которая позволяет масштабировать изображение, пока вы рисуете его на холсте.

Если вы изменяете размер непропорционально (как в своем примере), некоторые из ваших изображений с измененным размером упадут с холста. Тогда ваш котенок будет выглядеть искаженным (в вашем примере: растянуто вертикально)

Этот образец кода пропорционально изменяется с использованием только ширины. Таким образом, ваш котенок не растягивается.

// calculate how much to scale the resulting image 

var originalWidth=16; 
var originalHeight=20; 
var desiredWidth=20; 
var scalingFactor = desiredWidth/originalWidth; 

// scale the original size proportionally 

var newWidth=originalWidth*scalingFactor; 
var newHeight=originalHeight*scalingFactor; 

// resize the canvas to fit the desired image size 
// Note: canvas is a reference to your html canvas element 

canvas.width=newWidth; 
canvas.height=newHeight; 


// Draw the image to the canvas 
// This version of drawImage allows you to scale the original image 
// while you are drawing it to the canvas. 

context.drawImage(
    originalImage, 
    0,0,originalWidth,originalHeight, 
    0,0,newWidth,newHeight); 

Answer 2

Я хотел бы предложить вам использовать easyCanvas library для этого. Причина этого заключается в том, что встроенный метод drawImage контекста не масштабирует изображение пропорционально для вас, и он предполагает небольшую дозу математики, чтобы получить ее право, особенно в тех случаях, когда форма назначения отличается от оригинала, и вы хотите, чтобы она охватывают всю площадь.

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

См. Это demo for an live example.

В сущности, что вы делаете, чтобы привлечь ваше загруженное изображение в холст с помощью этого метода:

ez.drawImageProp(image, x, y, width, height); 

, где ширина и высота будет то, что место назначения.

Это также смещение параметров, так что вы можете переместить изображение вокруг в пределах этой формы, где смещение 0,5 центры, 0 находится слева и 1 справа:

ez.drawImageProp(image, x, y, width, height, offsetX, offsetY); 

Предполагая, что изображение уже доступно все вам нужно сделать, это:

var ez = new easyCanvas('canvas'); /// provide ID of existing canvas 
ez.drawImageProp(image, 0, 0, ez.width, ez.height); 

Отказ от ответственности: Я являюсь автором easyCanvas. easyCanvas является открытым исходным кодом (лицензия GPL3.0).