提问者:小点点

如何为画布元素设置最小宽度、最大宽度、最小高度、最大高度


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的图片。

所以基本上我的问题是,有没有办法在画布上设置最小高度、最大高度、最小宽度和最大宽度,或者任何其他可以在上传前更改图像分辨率的替代方案。


共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,/, "");
}