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

将加载到画布上的图像绘制为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();
}

正在逐步描述here

Answer 2

test.attributes[ key ]

}

Answer 3

谢谢你们，在这里使用Canvas是正确的方法。这是我最后的代码这是最终的代码：

参考Link

<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>

处理要显示的图像

3 个答案: