我如何調整畫布圖像的大小

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;

...現在您可以將畫布的drawImage方法與這些值一起使用...

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

如果回調圖像的寬度大於寬度，則可以應用頁面1畫布尺寸的比率來計算x偏移量，而不是y偏移量。 如果回調圖像是正方形的，則其比率將為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();