Javascript 处理要显示的图像

我想检查图像的大小，然后通过定义设置的大小（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);
        }
    }

将加载的图像绘制到画布中，大小为w*h，移动了某个位置

通过yourcanvas.toDataUrl（）获取图像数据

将图像数据放入图像元素中

执行此操作的函数

function getImagePortion(imgObj, newWidth, newHeight, startX, startY, ratio){
 /* the parameters: - the image element - the new width - the new height - the x point we start taking pixels - the y point we start taking pixels - the ratio */
 //set up canvas for thumbnail
 var tnCanvas = document.createElement('canvas');
 var tnCanvasContext = canvas.getContext('2d');
 tnCanvas.width = newWidth; tnCanvas.height = newHeight;

 /* use the sourceCanvas to duplicate the entire image. This step was crucial for iOS4 and under devices. Follow the link at the end of this post to see what happens when you don’t do this */
 var bufferCanvas = document.createElement('canvas');
 var bufferContext = bufferCanvas.getContext('2d');
 bufferCanvas.width = imgObj.width;
 bufferCanvas.height = imgObj.height;
 bufferContext.drawImage(imgObj, 0, 0);

 /* now we use the drawImage method to take the pixels from our bufferCanvas and draw them into our thumbnail canvas */
 tnCanvasContext.drawImage(bufferCanvas, startX,startY,newWidth * ratio, newHeight * ratio,0,0,newWidth,newHeight);
 return tnCanvas.toDataURL();
}

是否一步一步描述

函数句柄文件（fileToLoad）{
if（fileToLoad.type.match（“image.*））{
var fileReader=newfilereader（）；
fileReader.onload=函数（fileLoadedEvent）{
var img=新图像（）；
img.onload=函数（）{
var canvas=document.getElementById（“canvas”）；
canvas.width=img.width；
canvas.height=img.height；
var ctx=canvas.getContext（'2d'）；
ctx.drawImage（img，0,0）；
//裁剪=ctx.getImageData（x，y，裁剪宽度，裁剪高度）；
裁剪=ctx.getImageData（500500200200）；
//清除是可选的…新img在旧img之上
clearRect（0，0，canvas.width，canvas.height）；
//重新调整帆布尺寸至交叉img尺寸
画布宽度=200；
画布高度=200；
ctx.putImageData（裁剪，0,0）
};
img.src=fileLoadedEvent.target.result；
};
readAsDataURL（fileToLoad）；
}

}谢谢大家， 在这里，使用画布是正确的方法。这是我的最后一段代码 以下是最终代码：

参考号

上传图像
：上传图像：


水平的


垂直的


水平小


画廊
//检查图像大小和类型
//以所需格式显示图像
var imageLoader=document.getElementById（'imageLoader'）；
imageLoader.addEventListener（'change'，handleImage1，false）；
var canvas1=document.getElementById（'imageCanvas1'）；
var ctx1=canvas1.getContext（'2d'）；
函数handleImage1（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
画布1.宽度=755；
画布1.高度=450；
ctx1.drawImage（img，0,0）；
}
img.src=event.target.result；
}
reader.readAsDataURL（e.target.files[0]）；
}
var imageLoader1=document.getElementById（'imageLoader'）；
imageLoader1.addEventListener（'change'，handleImage2，false）；
var canvas2=document.getElementById（'imageCanvas2'）；
var ctx2=canvas2.getContext（'2d'）；
函数handleImage2（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
canvas2.width=365；
画布2.高度=450；
ctx2.drawImage（img，0,0）；
}
img.src=event.target.result；
}
reader.readAsDataURL（e.target.files[0]）；
}
var imageLoader2=document.getElementById（'imageLoader'）；
imageLoader2.addEventListener（'change'，handleImage3，false）；
var canvas3=document.getElementById（'imageCanvas3'）；
var ctx3=canvas3.getContext（'2d'）；
函数handleImage3（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
canvas3.width=365；
画布3.高度=212；
ctx3.drawImage（img，0,0）；
}
img.src=event.target.result；
}
reader.readAsDataURL（e.target.files[0]）；
}
var imageLoader3=document.getElementById（'imageLoader'）；
imageLoader3.addEventListener（'change'，handleImage4，false）；
var canvas4=document.getElementById（'imageCanvas4'）；
var ctx4=canvas4.getContext（'2d'）；
函数handleImage4（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
画布宽度4.4=380；
画布4.高度=380；
ctx4.绘图图像（img，0,0）；
}
img.src=event.target.result；
}
reader.readAsDataURL（e.target.files[0]）；
}

<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);
}

<html>
<title>
    Upload Image
</title>
<div style="text-align: center">
    <h1>: UPLOAD IMAGE : </h1>
</div>

<div>
    <input type="file" id="imageLoader" name="imageLoader" onchange="checkFileDetails()"/>
    <br/>
    <h3>Horizontal<h3>
    <canvas id="imageCanvas1"></canvas> 
    <br/>
    <h3>Vertical<h3>
    <canvas id="imageCanvas2"></canvas>
    <br/>
    <h3>Horizontal Small<h3>
    <canvas id="imageCanvas3"></canvas>
    <br/>
    <h3>Gallery<h3>
    <canvas id="imageCanvas4"></canvas>
</div>
<script>
    //Check for the image Size and type




    // Display Image in the required format

    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage1, false);
    var canvas1 = document.getElementById('imageCanvas1');
    var ctx1 = canvas1.getContext('2d');

    function handleImage1(e){
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas1.width = 755;
                canvas1.height = 450;
                ctx1.drawImage(img,0,0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }

    var imageLoader1 = document.getElementById('imageLoader');
    imageLoader1.addEventListener('change', handleImage2, false);
    var canvas2 = document.getElementById('imageCanvas2');
    var ctx2 = canvas2.getContext('2d');

    function handleImage2(e){
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas2.width = 365;
                canvas2.height = 450;
                ctx2.drawImage(img,0,0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }

    var imageLoader2 = document.getElementById('imageLoader');
    imageLoader2.addEventListener('change', handleImage3, false);
    var canvas3 = document.getElementById('imageCanvas3');
    var ctx3 = canvas3.getContext('2d');

    function handleImage3(e){
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas3.width = 365;
                canvas3.height = 212;
                ctx3.drawImage(img,0,0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }

    var imageLoader3 = document.getElementById('imageLoader');
    imageLoader3.addEventListener('change', handleImage4, false);
    var canvas4 = document.getElementById('imageCanvas4');
    var ctx4 = canvas4.getContext('2d');

    function handleImage4(e){
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas4.width = 380;
                canvas4.height = 380;
                ctx4.drawImage(img,0,0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }


</script>