Question

第1页：

 //Calls the function from page 2 and the callback image is set as the source of the control.

previewImage(current, function(img) {
    jQuery(".mapItem").attr("src",img.src);
});

第2页：

//The functions callback returns an image which we use in page 1 (above)

var canvas = document.createElement('canvas');
context = canvas.getContext('2d');

context.drawImage(this.m_Images[i],0,0,canvas.width,canvas.height);
var t = new Image();
t.src = canvas.toDataURL();
callback(t);

问题：

我有2个JavaScript页面，第一个有图像控件，第二个有一个函数可以将回调作为图像返回。

我在第1页(.mapItem)中的控件的高度和宽度为75.2px（固定）。然而，来自回调的图像每次都会有不同的大小，例如一天它可以是200px * 300px，一天它可以是150px * 200px等

如何剪辑或剪切回调图像？我希望图像（t）为零（0）为x和y起点，然后将图像剪切到.mapItem控制高度和宽度的位置。

我需要这个比例。所以我不能只添加以下代码：

context.drawImage(this.m_Images[i],0,0,72.5,72.5);因为这会破坏图像，因为我们甚至不知道它是否是方形的。

提前致谢：）

Answer 1

您可以确定回调图像的比例，然后将它们应用到第1页图像：

假设回调图像为300x200px。图像的高宽比可以表示为......

var ratio = callbackImage.height / callbackImage.width;

......或者，在这种情况下......

var ratio = 200 / 300; // 0.666...

我们知道第1页画布的宽度是72.5所以我们可以将比率应用于该值来确定回调图像的比例高度，如此...

var canvasWidthHeight = 72.5;
var imageHeight = canvasWidthHeight * ratio; // 48.333...

使回调图像居中于页面1画布上计算y偏移量，如此...

var y = (canvasWidthHeight - imageHeight) / 2;

...现在你可以使用canvas drawImage方法和这些值......

context.drawImage(
    this.m_Images[i], 
    0, y, 
    canvasWidthHeight, imageHeight
);

如果回调图片高于宽幅图片，则应用第1页画布尺寸的比例来计算x偏移量，而不是y offest。如果回调图像是方形的，那么它的比例将是1.0，你可以简单地将它绘制到方形页面1画布上

context.drawImage(
    this.m_Images[i],
    0, 0,
    canvasWidthHeight, canvasWidthHeight
);

所有代码看起来都像这样......

var image = this.m_Images[i];
var canvas = {
    width: 72.5,
    height: 72.5
};

var wh = 0;
var ratio = image.height / image.width;

if (image.width > image.height) { // landscape
    wh = canvas.width * ratio;
    context.drawImage(
       image,
       0, (canvas.height - wh) / 2,
       canvas.width, wh
    );
} else if (image.width < image.height) { // portrait
    ratio = image.width / image.height;
    wh = canvas.height * ratio;
    context.drawImage(
       image,
       (canvas.width - wh) / 2, 0,
       wh, canvas.height
    );
} else { // square
    context.drawImage(
        image,
        0, 0,
        canvas.width, canvas.height
    );
}

希望有所帮助。 ;）

编辑：在启动回调之前，您可能需要确保new Image()已完全加载。您可以使用以下代码段执行此操作...

// callback preparation code as before...

var t = new Image();
t.addEventListener('load', function() {
    callback(this);
});
t.src = canvas.toDataURL();

如何调整画布图像的大小

1 个答案: