angularjs剪裁工具 imgeCropper

Image Cropper可以為圖片顯示一個裁剪框，裁剪框允許用戶調整大小和位置，常用來做用戶自定義頭像的裁剪功能。

目前Image Cropper的實現是無依賴的，瀏覽器支持到IE8+。Image Cropper可以和Angular一塊使用，也可以獨立使用。

安裝

引入文件

最簡單的辦法是直接在HTML中引用這兩個文件，不過每個項目的情況不同，可以根據情況來決定如何引入這兩個文件。

Online Demo

使用說明

Image Cropper是因為一個裁剪頭像並上傳的需求誕生的。

一個裁剪頭像的流程大概是這樣：

用戶選擇一張本地圖片。
用戶使用鼠標拖拽裁剪頭像，並實時預覽不同大小的裁剪效果。
把用戶的裁剪范圍和圖片提交到服務器端。

從提交到服務器端的角度來看，我們關注的點只有兩個：

用戶選擇的本地圖片
用戶的裁剪結果(Rect: 相對於圖片的left、top、width、height)

在Angular中使用

Image Cropper在同一個頁面上可以指定多個Instance，該屬性定義一個字符串，作為Image Cropper的一個實例的ID。

Image Cropper的ID是必需的，在下面的例子里面，我們使用avatar作為例子中的Image Cropper的實例的ID。

Image Cropper為Angular提供了三個屬性Directive，通過這三個Directive的配合，即可實現圖像裁剪和預覽的效果。

cropper：添加到要顯示裁剪框的元素上，該directive的屬性值是cropper的ID。
cropper-preview：添加到要顯示預覽的元素上。
cropper-source：添加到input type=file上。

注意：下面例子中的data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7是一個空的gif文件，用來在用戶未選擇圖片的情況下顯示該圖片。

cropper

cropper需要添加到要顯示裁剪框的元素上，directive的屬性值為Image Cropper的實例的ID，例如：

<div class="image-container target" cropper="avatar">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="noavatar" />
</div>

cropper-aspect-ratio

cropper默認的款高比為1，如果需要使用其他寬高比或者不限制寬高比，則可以設置此屬性。比如不限制寬高比，則可以這么設置：

<div class="image-container target" cropper="avatar" cropper-aspect-ratio="auto">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="noavatar" />
</div>

cropper-aspect-ratio如果不是數字，則為不限制寬高比。

cropper-context

用戶的裁剪結果需要導出到Controller中的一個變量里面，我們可以使用cropper-context來指定這個變量，比如Controller中的變量名是cropContext，則這么定義：

<div class="image-container source" cropper="avatar" cropper-context="cropContext">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="noavatar" />
</div>

cropper-source

cropper-source需要添加到一個input[type=file]上，directive的屬性值為Image Cropper的實例的ID，例如：

<input type="file" name="avatar" cropper-source="avatar" />

在input[type=file]的值發生變化的時候，cropper和cropper-preview會去使用用戶選擇的圖片。

cropper-file-types

Image Cropper默認支持的類型為gif、png、jpg，如果需要定義只支持者某幾種格式，比如只支持jpg、png，可以這么定義：

<input type="file" name="avatar" cropper-source="avatar" cropper-file-types="jpg,jpeg,png" />

cropper-preview

在用戶裁剪圖像的過程中，需要動態的預覽不同大小的頭像的效果，在顯示預覽圖像的元素上添加這個directive。這個directive的屬性值為Image Cropper的實例的ID，例如：

<div class="image-container small" cropper-preview="avatar">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="noavatar" />
</div>

注意，如果設置了aspectRatio為非數值，即不限制裁剪圖片的寬高比，cropper-preview的HTML應該是這種結構的：

<div class="image-container small" id="preview-small">
  <div class="image-wrapper">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="noavatar" />
  </div>
</div>

獨立使用

Image Cropper是可以不和Angular集成，獨立使用的。如果你的頁面中沒有Angular，則在window上可以直接使用Cropper。

創建Cropper實例

獨立使用Cropper，需要指定這么幾個屬性：

element：顯示裁剪框的Element。
aspectRatio：裁剪框的寬高比，默認值為1。如果設置非數字類型，則為不限制款高比。
previews：數組類型，可以指定多個顯示圖片預覽的元素。
onCroppedRectChange：在裁剪結果變更之后會觸發這個回調。

一個例子如下：

var cropper = new Cropper({
    element: document.getElementById('cropper-target'),
    previews: [
      document.getElementById('preview-large'),
      document.getElementById('preview-medium'),
      document.getElementById('preview-small')
    ],
    onCroppedRectChange: function(rect) {
      console.log(rect);
    }
});

更改Cropper使用的圖片

Image Cropper為Angular提供了一個cropper-source來在input[type=file]變更之后更改Cropper的圖片，在獨立使用的時候，需要手動去做這件事。

變更Cropper的圖片使用setImage方法來完成，假設input[type=file]的id為cropper-input，示例代碼如下：

var input = document.getElementById('cropper-input');
input.onchange = function() {
  if (typeof FileReader !== 'undefined') {
    var reader = new FileReader();
    reader.onload = function (event) {
      cropper.setImage(event.target.result);
    };
    if (input.files && input.files[0]) {
      reader.readAsDataURL(input.files[0]);
    }
  } else { // IE10-
    input.select();
    input.blur();

    var src = document.selection.createRange().text;
    cropper.setImage(src);
  }
};