Question

我使用fabricjs渲染图像，但我拥有的图像非常大，接近5 MB甚至更多。例如，我的图片有2130*1800 (width*height)和我的画布宽度和高度，我可以max is 90% window.width*90% window.height来支付。{/ p>

我该怎么做？

Answer 1

以下是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);
}

基本上你需要计算如果用画布高度缩放图像时的宽度是什么，如果用画布宽度缩放图像的高度是多少，哪个更小，那么你按照那个尺寸缩放

Answer 2

要使图像适合画布，请使用最小拟合比例。可能会导致画布上出现一些空白区域。

// 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

如何通过减少高度和宽度将5MB图像渲染到画布上

2 个答案: