调整画布中的图像大小

Question

我正在尝试加载图像并将其调整为416x416。 但是我仍然得到相同的图像尺寸。

码：

var ctx = canvas.getContext('2d');

function readURL(input) {
    if(input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {;
            var image = new Image();
            image.src = e.target.result
            image.addEventListener("load",function(){
             ctx.drawImage(image, 0, 0, 416,416)
            })
        }
        reader.readAsDataURL(input.files[0]);
    }
}

我已经阅读了很多有关此的文章，但是所有内容都表明代码应该正确，我在哪里做错了？

Answer 1

如果不设置画布大小，可能会遇到这种情况。

如果未设置画布大小，则无法调整大小：

 const width = 416; const height = 416; let canvas = document.querySelector('canvas') //canvas.width = width; //canvas.height = height; function readURL(input) { let ctx = canvas.getContext('2d'); if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) {; var image = new Image(); image.src = e.target.result image.addEventListener("load", function() { ctx.drawImage(image, 0, 0, width, height) }) } reader.readAsDataURL(input.files[0]); } } 

 <!DOCTYPE html> <html> <body> <input type="file" onchange="readURL(this)" /> <canvas></canvas> </body> </html> 

如果设置了画布大小，则调整大小有效：

 const width = 416; const height = 416; let canvas = document.querySelector('canvas') canvas.width = width; canvas.height = height; function readURL(input) { let ctx = canvas.getContext('2d'); if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) {; var image = new Image(); image.src = e.target.result image.addEventListener("load", function() { ctx.drawImage(image, 0, 0, width, height) }) } reader.readAsDataURL(input.files[0]); } } 

 <!DOCTYPE html> <html> <body> <input type="file" onchange="readURL(this)" /> <canvas></canvas> </body> </html>