Вопрос:

Как сделать изображение размером 5 МБ на холсте, уменьшив высоту и ширину

javascript html html5 canvas fabricjs

524 просмотра

2 ответа

499 Репутация автора

Я использую fabricjs для рендеринга изображений, но мои изображения очень большие, около 5 МБ или даже больше. Например , у меня есть изображение , имеющие 2130*1800 (width*height)и моя ширина холста и высоту, что я могу себе позволить max is 90%из window.width*90%из window.height.

Как я могу это сделать ?

Автор: subhfyu546754 Источник Размещён: 23.10.2015 08:02

Ответы (2)


2 плюса

3984 Репутация автора

Решение

Вот пример jsFiddle: https://jsfiddle.net/CanvasCode/7oghuwe2/3/

Javascript

var imageRatio = image1.width / image1.height;

var newHeight = canvas1.width / imageRatio;
var newWidth = canvas1.height * imageRatio;

var heightDiff = newHeight - canvas1.height;
var widthDiff = newWidth - canvas1.width;

if (widthDiff >= heightDiff) {
    context1.drawImage(image1, 0, 0, canvas1.width, canvas1.width / imageRatio);
} else {
    context1.drawImage(image1, 0, 0, canvas1.height * imageRatio, canvas1.height);
}

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

Автор: Canvas Размещён: 23.10.2015 08:07

2 плюса

29832 Репутация автора

Чтобы разместить изображение на холсте, используйте минимальную шкалу подгонки. Может привести к появлению некоторых пустых областей на холсте.

// centre img on canvas ctx to fit
var scale = Math.min(ctx.canvas.width / img.width, ctx.canvas.height / img.height); // get the min scale to fit
var x = (ctx.canvas.width - (img.width * scale) ) / 2; // centre x
var y = (ctx.canvas.height - (img.height * scale) ) / 2; // centre y
ctx.drawImage(img, x, y, img.width * scale, img.height * scale); // draw scaled img onto the canvas.

Чтобы заполнить холст основным аспектом изображения (усекает изображение), используйте максимальный масштаб.

// centre img on canvas ctx to fill canvas
var scale = Math.max(ctx.canvas.width / img.width, ctx.canvas.height / img.height); // get the max scale to fit
var x = (ctx.canvas.width - (img.width * scale) ) / 2;
var y = (ctx.canvas.height - (img.height * scale) ) / 2;
ctx.drawImage(img, x, y, img.width * scale, img.height * scale);

Чтобы просто заполнить холст с изображением, игнорирующим аспект.

ctx.drawImage(img, x, y, ctx.canvas.width, ctx.canvas.height);

РЕДАКТИРОВАТЬ: я забыл добавить ..

Чтобы установить холст на масштаб изображения, позволяющий рисовать на холсте в системе координат изображения.

// use min to fit, use max to fill
var scale = Math.max(ctx.canvas.width / img.width, ctx.canvas.height / img.height);
var x = (ctx.canvas.width - (img.width * scale) ) / 2;
var y = (ctx.canvas.height - (img.height * scale) ) / 2;
ctx.setTransform(scale, 0, 0, scale, x, y); // set the canvas to the scaled image coordinate system
ctx.drawImage(img, 0, 0); //draw the image at 0 0 as it now fits/fills
Автор: Blindman67 Размещён: 23.10.2015 07:44
Вопросы из категории :
32x32