准备
开始
- 下载三个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: "取消"
});
}
}
