天天看點
傳回

HTML5 實作本地圖檔裁剪

HTML5 實作本地圖檔裁剪

文章目錄

  • ​​HTML5 實作本地圖檔裁剪​​
  • ​​1.知識點​​
  • ​​1.HTML 結構與 CSS 樣式​​
  • ​​2.初始化​​
  • ​​3 實作 handleFiles，擷取檔案，讀取檔案并生成 url​​
  • ​​4.實作 paintImage 方法​​
  • ​​5 實作 cutImage 方法​​
  • ​​6 編寫 drag 方法​​
  • ​​7 儲存截圖​​
  • ​​8 js部分 代碼​​

這次小的案例是利用 HTML5 的 canvas 技術，結合 HTML5 的 File API 來實作圖檔的本地裁剪，從一個大圖檔中選取裁剪區域，

1.知識點

  • canvas
  • JavaScript

代碼1的目錄如下

建立下面的目錄結構：

imgcut
  |__index.html
  |__main.js

然後在該目錄下下載下傳實驗需要用到的圖檔：

https://labfile.oss.aliyuncs.com/courses/363/aviary_heibai.jpg

可以自行去下載下傳

1.HTML 結構與 CSS 樣式

我們在 index.html 中寫下下面的代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Crop Image</title>
  </head>
  <style type="text/css">
    body {
      text-align: center;
    }
    #label {
      border: 1px solid #ccc;
      background-color: #fff;
      text-align: center;
      height: 300px;
      width: 300px;
      margin: 20px auto;
      position: relative;
    }
    #get_image {
      position: absolute;
    }
    #edit_pic {
      position: absolute;
      display: none;
      background: #000;
    }
    #cover_box {
      position: absolute;
      z-index: 9999;
      display: none;
      top: 0px;
      left: 0px;
    }
    #show_edit {
      margin: 0 auto;
      display: inline-block;
    }
    #show_pic {
      height: 100px;
      width: 100px;
      border: 2px solid #000;
      overflow: hidden;
      margin: 0 auto;
      display: inline-block;
    }
  </style>
  <body>
    <input type="file" name="file" id="post_file" />
    <button id="save_button">SAVE</button>
    <div id="label">
      <canvas id="get_image"></canvas>
      <p>
        <canvas id="cover_box"></canvas>
        <canvas id="edit_pic"></canvas>
      </p>
    </div>
    <p>
      <span id="show_edit"></span>
      <span id="show_pic"><img src="" /></span>
    </p>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

以上的三個 ​

​<canvas>​

​ 标簽都是用來處理跟圖檔相關的内容的，詳細的處理會在後續的 js 代碼中給出。而 id 為 show_edit 和 id 為 show_pic 這兩個是為了圖檔的預覽和檢視最後的圖檔生成結果。做完 html 和 css 的布局之後，我們就可以進入 js 代碼，實作本節課的圖檔裁剪功能。

2.初始化 

var postFile = {
  init: function () {
    var t = this;
    t.regional = document.getElementById('label');
    t.getImage = document.getElementById('get_image');
    t.editPic = document.getElementById('edit_pic');
    t.editBox = document.getElementById('cover_box');
    t.px = 0; //background image x
    t.py = 0; //background image y
    t.sx = 15; //crop area x
    t.sy = 15; //crop area y
    t.sHeight = 150; //crop area height
    t.sWidth = 150; //crop area width
    document
      .getElementById('post_file')
      .addEventListener('change', t.handleFiles, false);
  },
};

這樣子，我們就實作了初始化

我們所有的函數和變量都是封裝在​

​postFile​

​這個對象裡面的，上面的 init 函數主要是設定一些初始值。

t.px = 0;
t.py = 0;
t.sx = 15;
t.sy = 15;
t.sHeight = 100;
t.sWidth = 100;

以上的​

​t.px​

​​， ​

​t.py​

​​分别表示在實時預覽區域的背景圖檔的坐标；​

​t.sx​

​​，​

​t.sy​

​​， ​

​t.sHeight​

​​， ​

​t.sWidth​

​分别表示圖檔的橫縱坐标和寬高。

并且我們通過​

​document.getElementById​

​擷取了多個稍後需要操作的元素，注意到：

document
  .getElementById('post_file')
  .addEventListener('change', t.handleFiles, false);

我們通過監聽​

​id​

​​為​

​post_file​

​​的​

​input​

​​表單的​

​change​

​​事件來處理使用者上傳的檔案，在這我們交給了​

​handleFiles​

​​函數來處理，是以下面我們就來實作​

​handleFiles​

​函數。

3 實作 handleFiles，擷取檔案，讀取檔案并生成 url 

handleFiles: function() {
        var fileList = this.files[0];
        var oFReader = new FileReader();
        oFReader.readAsDataURL(fileList);
        oFReader.onload = function (oFREvent) {
            postFile.paintImage(oFREvent.target.result);
        };
    },

上面這幾行代碼就可以基本實作​

​handleFiles​

​​的處理功能，我們在這裡就使用了 HTML5 的 File API，首先通過​

​new FileReader()​

​​來執行個體化一個 FileReader 對象​

​oFReader​

​​，再調用其​

​readAsDataURL()​

​方法将檔案的内容讀取出來并處理成 base64 編碼的格式。

最後，當檔案讀取完畢并完成加載的時候，我們通過 postFile.paintImage(oFREvent.target.result)處理我們讀取到的圖檔，說白了就是将讀取到的圖檔資料重新繪畫到浏覽器上。

關于​

​oFREvent​

​究竟是什麼東西，你可以通過 console.log(oFREvent)來檢視。你還可以檢視這裡的連結來擷取更多的 FileReader 的知識：

​​https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader​​

4.實作 paintImage 方法 

paintImage: function(url) {
        var t = this;
        var createCanvas = t.getImage.getContext("2d");
        var img = new Image();
        img.src = url;
        img.onload = function(){

            if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
                t.imgWidth = img.width;
                t.imgHeight = img.height;

            } else {
                var pWidth = img.width / (img.height / t.regional.offsetHeight);
                var pHeight = img.height / (img.width / t.regional.offsetWidth);
                t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
                t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
            }
            t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
            t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';

            t.getImage.height = t.imgHeight;
            t.getImage.width = t.imgWidth;
            t.getImage.style.left = t.px;
            t.getImage.style.top = t.py;

            createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);
            t.imgUrl = t.getImage.toDataURL();
            t.cutImage();
            t.drag();
        };
    },

以上最重要的就是根據容器的大小使用 canvas 繪制圖檔。在上一步使用 File API 的 FileReader 已經得到了需要上傳圖檔的位址了(oFREvent.target.result 這個值)，接下來需要使用 canvas 把這個圖檔繪制出來。我們首先使用到 getImage.getContext 來擷取​

​<canvas id="get_image"></canvas>​

​​的 2d 内容，簡單了解就是圖像内容，然後利用 new Image()來得到一個​

​<img>​

​标簽，設定 src 屬性的值，如果你 console.log(img),得到的大概是這樣的結果：

<img src="images/background.png" />

在​

​img.onload​

​​函數裡，我們的主要目的是為了将圖檔按照原大小等比例地重畫出來，是以才有 if 條件判斷，最後我們通過​

​createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);​

​這一行代碼來實作真正的繪畫圖檔，效果大概是這樣的：

HTML5 實作本地圖檔裁剪

這裡為什麼不直接插入​

​img​

​​而用​

​canvas​

​​重新繪制呢，這不是多此一舉了嗎？其實不然。如果用​

​img​

​​直接插入頁面，就無法自适應居中了，如果使用​

​canvas​

​​繪制圖檔，不但能使圖檔自适應居中以及能等比例縮放，并且友善把圖檔的坐标，尺寸大小傳給後來的遮罩層(​

​id​

​​為​

​label​

​的 div)，這樣能根據圖檔的坐标以及圖檔的尺寸大小來繪制遮罩層。

如果你​

​對drawImage()​

​有任何疑問，點選下面的連結進行詳細的了解：

​​https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage​​

到這裡，前期的一小半工作其實已經完成了。我們按照上面的思路，接下來就把​

​cutImage​

​​和​

​drag​

​這兩個方法實作就可以了。

5 實作 cutImage 方法

在上一張圖檔中，我們其實很清楚地看到了兩個明暗不一的層，這是因為我們根據背景圖的坐标和尺寸來繪制遮罩層覆寫在背景上面，并且使用 canvas 的​

​clearRect​

​方法清空出一塊裁剪區域，使之與不裁剪的地方做明暗對比，這樣的目的一個是為了更好地看到對比，一個就是為了使用者體驗：

cutImage: function() {
    var t = this;

    t.editBox.height = t.imgHeight;
    t.editBox.width = t.imgWidth;
    t.editBox.style.display = 'block';
    t.editBox.style.left = t.px;
    t.editBox.style.top = t.py;

    var cover = t.editBox.getContext("2d");
    cover.fillStyle = "rgba(0, 0, 0, 0.5)";
    cover.fillRect (0,0, t.imgWidth, t.imgHeight);
    cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);


    document.getElementById('show_edit').style.background = 'url(' + t.imgUrl + ')' + -t.sx + 'px ' + -t.sy + 'px no-repeat';
    document.getElementById('show_edit').style.height = t.sHeight + 'px';
    document.getElementById('show_edit').style.width = t.sWidth + 'px';
},

以上的​

​cutImage​

​​方法主要是負責兩個事情，一個是制造遮罩層，一個是利用 css 的​

​background​

​屬性将選中的裁剪區域實時預覽。

6 編寫 drag 方法

在很多 web 應用中，使用截圖上傳頭像功能時我們希望能裁剪到滿意的圖檔，是以裁剪框就需要不停的變動才得以裁剪出完美的圖檔。前幾步已經把裁剪圖檔的基本功能做出來了，是以現在需要做的就是裁剪框跟進滑鼠的移動來實時裁剪圖檔

drag: function() {
        var t = this;
        var draging = false;
        var startX = 0;
        var startY = 0;

        document.getElementById('cover_box').onmousemove = function(e) {


            var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
            var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

            if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
                this.style.cursor = 'move';

                this.onmousedown = function(){
                    draging = true;

                    t.ex = t.sx;
                    t.ey = t.sy;


                    startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
                    startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );

                }
                window.onmouseup = function() {
                    draging = false;
                }

                if (draging) {


                    if ( t.ex + (pageX - startX) < 0 ) {
                        t.sx = 0;
                    } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
                        t.sx = t.imgWidth - t.sWidth;
                    } else {
                        t.sx = t.ex + (pageX - startX);
                    };

                    if (t.ey + (pageY - startY) < 0) {
                        t.sy = 0;
                    } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
                        t.sy = t.imgHeight - t.sHeight;
                    } else {
                        t.sy = t.ey + (pageY - startY);
                    }

                    t.cutImage();
                }
            } else{
                this.style.cursor = 'auto';
            }
        };
    }

這個方法你要了解以下幾個主要的點：

var pageX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
var pageY = e.pageY - (t.regional.offsetTop + this.offsetTop);

我們通過上面兩行代碼來擷取滑鼠距離背景圖檔的距離，e.pageX 代表滑鼠到浏覽器左邊緣的距離，t.regional.offsetLeft + this.offsetLeft 可以計算出圖檔到浏覽器的左邊邊緣的距離。上邊的距離同理可得。

if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight )

在了解了滑鼠距離背景圖檔的距離之後，這個應該很容易了解：就是判斷滑鼠是否在圖檔的區域内部。

t.ex = t.sx;
t.ey = t.sy;

startX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
startY = e.pageY - (t.regional.offsetTop + this.offsetTop);

這兩段代碼也是要拿出來說說的，頭兩行是為了記錄上一次截圖時候的坐标（沒有上一次就是初始化的時候的坐标）；後兩行記錄滑鼠按下時候的坐标。你都可以通過​

​console.log()​

​來分别檢視這幾個值。

if (draging) {
  if (t.ex + (pageX - startX) < 0) {
    t.sx = 0;
  } else if (t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
    t.sx = t.imgWidth - t.sWidth;
  } else {
    t.sx = t.ex + (pageX - startX);
  }

  if (t.ey + (pageY - startY) < 0) {
    t.sy = 0;
  } else if (t.ey + (pageY - startY) + t.sHeight > t.imgHeight) {
    t.sy = t.imgHeight - t.sHeight;
  } else {
    t.sy = t.ey + (pageY - startY);
  }

  t.cutImage();
}

上面這一行代碼就是說：如果是在拖動的情況下，我們需要根據坐标的變化來實時更新​

​t.sx​

​​和​

​t.sy​

​​的值,并且實時調用​

​cutImage​

​方法實作預覽。

移動時裁剪區域的坐标 = 上次記錄的定位 + (目前滑鼠的位置 - 按下滑鼠的位置)

7 儲存截圖 

document.getElementById('save_button').onclick = function () {
  t.editPic.height = t.sHeight;
  t.editPic.width = t.sWidth;
  var ctx = t.editPic.getContext('2d');
  var images = new Image();
  images.src = t.imgUrl;

  images.onload = function () {
    ctx.drawImage(
      images,
      t.sx,
      t.sy,
      t.sHeight,
      t.sWidth,
      0,
      0,
      t.sHeight,
      t.sWidth
    );
    document
      .getElementById('show_pic')
      .getElementsByTagName('img')[0].src = t.editPic.toDataURL();
  };
};

8 js部分 代碼 

var postFile = {
  init: function () {
    var t = this;
    t.regional = document.getElementById('label');
    t.getImage = document.getElementById('get_image');
    t.editPic = document.getElementById('edit_pic');
    t.editBox = document.getElementById('cover_box');
    t.px = 0; //background image x
    t.py = 0; //background image y
    t.sx = 15; //crop area x
    t.sy = 15; //crop area y
    t.sHeight = 100; //crop area height
    t.sWidth = 100; //crop area width
    document
      .getElementById('post_file')
      .addEventListener('change', t.handleFiles, false);

    document.getElementById('save_button').onclick = function () {
      t.editPic.height = t.sHeight;
      t.editPic.width = t.sWidth;
      var ctx = t.editPic.getContext('2d');
      var images = new Image();
      images.src = t.imgUrl;

      images.onload = function () {
        ctx.drawImage(
          images,
          t.sx,
          t.sy,
          t.sHeight,
          t.sWidth,
          0,
          0,
          t.sHeight,
          t.sWidth
        );
        document
          .getElementById('show_pic')
          .getElementsByTagName('img')[0].src = t.editPic.toDataURL();
      };
    };
  },

  handleFiles: function () {
    var fileList = this.files[0];
    var oFReader = new FileReader();
    oFReader.readAsDataURL(fileList);
    oFReader.onload = function (oFREvent) {
      postFile.paintImage(oFREvent.target.result);
    };
  },

  paintImage: function (url) {
    var t = this;
    var createCanvas = t.getImage.getContext('2d');
    var img = new Image();
    img.src = url;
    img.onload = function () {
      if (
        img.width < t.regional.offsetWidth &&
        img.height < t.regional.offsetHeight
      ) {
        t.imgWidth = img.width;
        t.imgHeight = img.height;
      } else {
        var pWidth = img.width / (img.height / t.regional.offsetHeight);
        var pHeight = img.height / (img.width / t.regional.offsetWidth);
        t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
        t.imgHeight =
          img.height > img.width ? t.regional.offsetHeight : pHeight;
      }
      t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + 'px';
      t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + 'px';

      t.getImage.height = t.imgHeight;
      t.getImage.width = t.imgWidth;
      t.getImage.style.left = t.px;
      t.getImage.style.top = t.py;

      createCanvas.drawImage(img, 0, 0, t.imgWidth, t.imgHeight);
      t.imgUrl = t.getImage.toDataURL();
      t.cutImage();
      t.drag();
    };
  },

  

postFile.init();
html5 css3 javascript html css
上一篇: ie6 ie7 ie8 共存以及Firefox浏覽器CSS相容寫法
下一篇: 解決DIV+CSS設計在IE6/IE7/IE8/火狐-相容性問題

繼續閱讀