準(zhǔn)備

• AlloyCrop
• alloy-crop.js
• alloy-finger.js
• transform.js

開始

• 下載三個(gè)JS文件
• 將下載的文件保存到web-app的src/assets/lib/alloycrop目錄下（需要新建lib和alloycrop目錄，你也可以修改自己的目錄名，只要引入文件時(shí)寫你的目錄就行）
  如圖：
  
  alloycrop.png
• 在index.html文件中引入三個(gè)JS文件
  如圖：
  
  index.html.png
  
  引入代碼：

  <!--圖片裁剪 AlloyCrop https://github.com/AlloyTeam/AlloyCrop-->
  <script src="./assets/lib/alloycrop/alloy-finger.js"></script>
  <script src="./assets/lib/alloycrop/transform.js"></script>
  <script src="./assets/lib/alloycrop/alloy-crop.js"></script>

• 在自己的頁面中（我的是crop-picture-demo.html）使用
  如圖：

  
  
  圖片.png
  
  

  代碼：

  <img src="{{cropPicture}}">
  <button ion-button block (click)="crop()">裁剪圖片</button>

• 頁面對(duì)應(yīng)的ts文件中（我的是crop-picture-demo.ts），需要定義AlloyCrop:declare var AlloyCrop;
  如圖：
  
  定義AlloyCrop.png

ts中.png

代碼：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

//圖片裁剪工具
declare var AlloyCrop;
/**
 * 圖片裁剪
 * Add by JoyoDuan on 2017-10-03
 */

@IonicPage()
@Component({
  selector: 'page-crop-picture-demo',
  templateUrl: 'crop-picture-demo.html',
})
export class CropPictureDemoPage {

  cropPicture = 'assets/images/crop-picture.jpg';

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad CropPictureDemoPage');
  }

  //裁剪圖片操作
  crop()
  {
    //https://github.com/AlloyTeam/AlloyCrop
    new AlloyCrop({
      image_src: 'assets/images/crop-picture.jpg',
      circle: true,   //是否是圓形剪切，false為方形
      width: 320,     //選區(qū)的寬
      height: 320,    //選區(qū)的高
      output: 1,      //輸出的倍率。比如如果output為2，選區(qū)的寬300，選區(qū)的高100，輸出的圖像的分辨率為 (2×300，2×100）
      ok: (base64, canvas) => {   //確定裁剪操作
        this.cropPicture = base64;
      },
      cancel: () => {     //取消裁剪操作
      },
      ok_text: "確定",
      cancel_text: "取消"
    });
  }

}