javascript - 处理要显示的图像

Question

我想检查图像的大小，然后通过定义设置大小(w*h)将图像显示为裁剪后的版本。

我该怎么做？

这是我试过的代码:

 var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        if (fileToLoad.type.match("image.*"))
        {
            var fileReader = new FileReader();
            fileReader.onload = function(fileLoadedEvent)
            {
                var imageLoaded = document.createElement("img");
                imageLoaded.src = fileLoadedEvent.target.result;
                document.body.appendChild(imageLoaded);
            };
            fileReader.readAsDataURL(fileToLoad);
        }
    }

Answer 1

<input type="file" onchange="handleFiles(this.files[0])" id="inputFileToLoad">
<canvas id="canvas"></canvas>

function handleFiles(fileToLoad) {
if (fileToLoad.type.match("image.*")) {
    var fileReader = new FileReader();
    fileReader.onload = function (fileLoadedEvent) {
        var img = new Image();
        img.onload = function () {
            var canvas = document.getElementById("canvas");

            canvas.width = img.width;
            canvas.height = img.height;

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

            ctx.drawImage(img, 0, 0);

            // cropped = ctx.getImageData(x, y, crop_width, crop_height);
            cropped = ctx.getImageData(500, 500, 200, 200);

            // clearing is optional ... new img is over the old one
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // re-size canvas to croped img size
            canvas.width = 200;
            canvas.height = 200;

            ctx.putImageData(cropped, 0, 0)
        };


        img.src = fileLoadedEvent.target.result;
    };
    fileReader.readAsDataURL(fileToLoad);
}