ionic3-图片裁剪（AllowCrop）

准备

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

开始

• 下载三个JS文件
• 将下载的文件保存到web-app的src/assets/lib/alloycrop目录下（需要新建lib和alloycrop目录，你也可以修改自己的目录名，只要引入文件时写你的目录就行）
  如图：
  alloycrop.png
• 在index.html文件中引入三个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>

• 页面对应的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,     //选区的宽
      height: 320,    //选区的高
      output: 1,      //输出的倍率。比如如果output为2，选区的宽300，选区的高100，输出的图像的分辨率为 (2×300，2×100）
      ok: (base64, canvas) => {   //确定裁剪操作
        this.cropPicture = base64;
      },
      cancel: () => {     //取消裁剪操作
      },
      ok_text: "确定",
      cancel_text: "取消"
    });
  }

}