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

標籤：頁面   ret   splay   移動   getc   效果   doc   block   result   

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;// 是否拖動，初始為 falsevar 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

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