html5上傳本地圖片,在線預覽及裁剪(filereader,canvas)

1 我們常常需要上傳頭像，點擊上傳按鈕時候需要預覽一下，使用filereader方法無需和后台交互，代碼如下：

//本地圖片在上傳之前的預覽效果 
//圖片上傳預覽
function previewImage(file)
{
  if (file.files && file.files[0])
  {      
      var img = document.getElementById('imghead');
      
      var reader = new FileReader();
      //讀取file完成之后加載
      reader.onload = function(evt){
        img.src = evt.target.result;
      }
      //開始讀取file
      reader.readAsDataURL(file.files[0]);
  }
  
}  

2 此時我們已經可以進行預覽，然后往往我們需要在線剪切一下圖片，鼠標可以在圖片上畫出自定義大小的方框，代碼如下：

// startX, startY 為鼠標點擊時初始坐標
// diffX, diffY 為鼠標初始坐標與 box 左上角坐標之差，用於拖動
var startX, startY, diffX, diffY;

// 是否拖動，初始為 false
var dragging = false;
//window.onload=function(e) {
//e = e || window.event;   
    
//是否存在方框    
var existbox = false;      

// 鼠標按下
document.onmousedown = function(e) {
    
    startX = e.pageX;
    startY = e.pageY;
    
    if(isimg(startX,startY)!==true){        
        return false;
    }        
    
    // 如果鼠標在 box 上被按下
    if(e.target.className.match(/box/)) {
        // 允許拖動
        dragging = true;
      
        // 設置當前 box 的 id 為 moving_box
        if(document.getElementById("moving_box") !== null) {
            document.getElementById("moving_box").removeAttribute("id");
        }
        e.target.id = "moving_box";
      
        // 計算坐標差值
        diffX = startX - e.target.offsetLeft;
        diffY = startY - e.target.offsetTop;

    }
    else {
        //如果頁面已經畫出了box,則不能畫出第二個box
        if(existbox===true){
            return false;
        }            
        // 在頁面創建 box
        var active_box = document.createElement("div");
        active_box.id = "active_box";
        active_box.className = "box";
        active_box.setAttribute("name","box");
        active_box.style.top = startY + 'px';
        active_box.style.left = startX + 'px';
        document.body.appendChild(active_box);
        active_box = null;
    }
    //防止瀏覽器拖動圖片亂動
    e.preventDefault();
};
       
// 鼠標移動
document.onmousemove = function(e) {
    // 更新 box 尺寸
    if(document.getElementById("active_box") !== null) {
                        
        var ab = document.getElementById("active_box");
        ab.style.width = e.pageX - startX + 'px';
        ab.style.height = e.pageY - startY + 'px';
        
        canvasimg(e);
    }
       
    // 移動，更新 box 坐標
    if(document.getElementById("moving_box") !== null && dragging) {
        
        var mb = document.getElementById("moving_box");
        var img = document.getElementById('imghead');
        
        mb.style.top = e.pageY - diffY + 'px';
        mb.style.left = e.pageX - diffX + 'px';        
        
        canvasimg(e);
    }
};
       
// 鼠標抬起
document.onmouseup = function(e) {
    // 禁止拖動
    dragging = false;
    if(document.getElementById("active_box") !== null) {
        var ab = document.getElementById("active_box");
        ab.removeAttribute("id");
        existbox=true;
        // 如果長寬均小於 3px，移除 box
        if(ab.offsetWidth < 3 || ab.offsetHeight < 3) {
            document.body.removeChild(ab);
            existbox=false;
        }
    }
};

3方框選中的內容我們使用canvas的drawImage方法畫出來即可。接上文代碼：

function canvasimg(e){
    var img=document.getElementById("imghead");
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    c.style.display="block";
    
    if(document.getElementById("active_box") !== null) {
        var ab = document.getElementById("active_box");
        ab.style.width = e.pageX - startX + 'px';
        ab.style.height = e.pageY - startY + 'px';
        
        c.height=parseInt(ab.style.height);
        c.width=parseInt(ab.style.width);

        ctx.drawImage(img,startX-img.offsetLeft,startY-img.offsetTop,parseInt(ab.style.width),parseInt(ab.style.height),0,0,parseInt(ab.style.width),parseInt(ab.style.height));
    }
       
    // 移動，更新 box 坐標
    if(document.getElementById("moving_box") !== null && dragging) {
        var mb = document.getElementById("moving_box");
        mb.style.top = e.pageY - diffY + 'px';
        mb.style.left = e.pageX - diffX + 'px';

        c.height=parseInt(mb.style.height);
        c.width=parseInt(mb.style.width);
        
        ctx.drawImage(img,parseInt(mb.style.left)-img.offsetLeft,parseInt(mb.style.top)-img.offsetTop,parseInt(mb.style.width),parseInt(mb.style.height),0,0,parseInt(mb.style.width),parseInt(mb.style.height));
    }
}

4 Demo效果和源碼下載可以點擊demo