imagecrop 微調圖像的利器

一、ImageCropper

ImageCropper是一個基於JavaScript的圖像剪切工具，它是利用HTML5 Canvas實現的。用它來微調你的圖像，可以達到很好的效果。ImageCropper可以用來剪切調整圖像大小、旋轉並多次保存。使用它可以得到像Photoshop中那樣的微調體驗。你可以在這裡找到：https://fengyuanchen.github.io/cropperjs/

二、ImageCropper文檔

在ImageCropper的官網上，你可以找到很多關於ImageCropper的文檔。這些文檔包括如下內容：

1、ImageCropper的安裝和使用方式

  let cropper = new Cropper(image, {
    aspectRatio: 16 / 9,
    crop(event) {
      console.log(event.detail.x);
      console.log(event.detail.y);
      ...
    }
  });

2、API Reference

  cropper.rotateTo(90);

3、常見問題解答

4、關於ImageCropper的示例及其詳細解析

三、ImageCropper.js

ImageCropper.js 是一個開源的 JavaScript 圖像裁剪庫。它可以用簡單的方式實現圖像的微調。在 ImageCropper.js 中，$().cropper() 方法是最常用的用於實例化 Cropper 插件的方法。也可以使用單例模式，在此方法的基礎上通過 $.fn.cropper.noConflict() 方法的方法對 Cropper 變數進行重新定義。這些示例代碼可以從 GitHub 上的 ImageCropper 庫中找到。

四、ImageCrop使用說明

使用ImageCrop可以調整圖片，對於圖像裁剪、旋轉、縮放及保存有較好的支持。ImageCrop內置了一些圖像特效（例如灰度、黑白等），同時也支持使用SVG過濾器。ImageCrop還支持拖放圖片，跨瀏覽器兼容性也非常好。

  let myImage = document.getElementById('myImage');
  let cropArea = document.getElementById('cropArea');
  let cropper = new ImageCrop(myImage, {
    cropArea: cropArea,
    zoom: true,
    effect: 'grayscale'
  });
  ...

五、ImageCrop如何去十字選取

在ImageCrop中，有兩種方式可以選擇十字：

1、按下十字形狀的調整器並拖拽來更改裁剪區域尺寸

let cropper = new Cropper(image, {
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
  }
});

2、滑鼠右鍵單擊或滑動屏幕（移動設備上）以臨時開啟移動並調整選區。

兩個簡單步驟將選中選區：

1、將滑鼠（或手指）懸停在選擇器的一條邊上。

2、雙擊引出的移動十字在圖像上移動並調整選擇區域大小和/或位置。