Html5本地圖片讀取及裁剪

1. 須要使用到Html5的FileReader，其中image-file是一個input type=file的文件瀏覽框。若是須要限制讀取圖片或者照相機：

<input type="file" accept="image/*" capture="camera" id="image-file" name=" image-file" />

2. 當用戶選擇了圖片以後，給input file綁定change事件，自動讀取本地文件。

var image_file = document.getElementById("image-file");
if(typeof FileReader==='undefined'){
    image.innerHTML = "抱歉，你的瀏覽器不支持 FileReader";
    image_file.setAttribute('disabled','disabled');
}else{
    image_file.addEventListener('change',readFile,false);
}

3. image就是一個id爲image的img標籤。readFile函數將圖片讀入，並自動居中裁剪爲 寬度自適應屏幕，高度固定爲180px的圖片。裁剪的過程當中須要使用Canvas。

function readFile(){
    var file = this.files[0];
    if(!/image\/\w+/.test(file.type)){
        alert("文件必須爲圖片！");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
        var image = document.getElementById("image");
 
        var image=new Image();
        image.src = this.result;
        var x = 0, y = 0, width = image.width, height = image.height;
        if (image.width / $(window).width() > image.height / 180) {
            width = $(window).width() * image.height / 180;
            x = (image.width - width) / 2;
        }
        else {
            height = 180 * image.width / $(window).width();
            y = (image.height - height) / 2;
        }
 
        var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0],
        ctx=canvas.getContext('2d');
        ctx.drawImage(image,x,y,width,height,0,0,width,height);
        var data=canvas.toDataURL();
 
        image.innerHTML = '<img class="img-responsive" style="width:100%; height: 180px;" src="'+data+'" alt=""/>'
    }
}