如何設置畫布元素的最小寬度、最大寬度、最小高度、最大高度

Question

function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = 1920;
        canvas.height = 1080;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL = canvas.toDataURL("image/jpg");
        return dataURL.replace(/^data:image\/(jpg);base64,/, "");
}

我正在上傳這張圖片，但我想確保如果上傳圖片的像素小於480p，它會在上傳前在畫布上繪制一個480p的圖片，如果上傳圖片的像素大於1080p，它會上傳前在畫布上繪制 1080p 圖像。

所以基本上我的問題是，有沒有辦法在畫布上設置 min-height、max-height、min-width 和 max-width 或任何其他替代方法，通過它我可以在上傳之前更改圖像的分辨率。

Answer 1

您可以執行以下操作，請注意您可能想要改進代碼的非常快速的答案：

 function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    let image = document.createElement("img");
    image.setAttribute("src", img);

    setTimeout(function(){
        if(image.height == 1080){
            canvas.width = 1920;
            canvas.height = 1080;
        }
        if(image.height == 480){
            canvas.width = 640;
            canvas.height = 480;
        }
    },0)

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL("image/jpg");
    return dataURL.replace(/^data:image\/(jpg);base64,/, "");
}

Answer 2

您可以使用名為“canvas”的類在 css 中編輯它，並將所需的最小寬度、最大寬度放在那里：

.canvas{
    min-width: //whatever you want;
    max-width: //whatever you want;
}

然后在 javascript 函數中，您可以更改畫布的類名：

canvas.className = "canvas";

希望這對您有所幫助。