Plugin: https://jamesssooi.github.io/Croppr.js/
in ts file:
ionViewDidLoad() {
this.croppr();
}
croppr(){
this.cropInstance = new Croppr('#croppr', {
// options
});
}
cropprGetVal(){
var newSrc
var data:any = []
data = this.cropInstance.getValue();
let x = data.x
let y = data.y
let width = data.width
let height = data.height
var img = new Image();
img.src = this.imgUrl;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width=width
canvas.height=height
ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
console.log(canvas.toDataURL("image/jpeg"))
this.imgCroppedUrl = canvas.toDataURL("image/jpeg")
}
in html
<div *ngIf="imgUrl != null">
<div class="modal">
<img id="croppr" [src]="imgUrl" #imageSrc>
</div>
</div>
<ion-item *ngIf="imgCroppedUrl != null" >
<img [src]="imgCroppedUrl" #imageSrc style="width:100%;height:auto;">
</ion-item>
in scss
.modal {
padding: 18px;
border: 1px solid lightgrey;
//left: 50%;
// transform: translateX(-50%);
width: 100%;
}
.modal img {
max-width: 100%;
}
.croppr-container * {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.croppr-container img {
vertical-align: middle;
max-width: 100%;
}
.croppr {
position: relative;
display: inline-block;
}
.croppr-overlay {
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
cursor: crosshair;
}
.croppr-region {
border: 1px dashed rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 3;
cursor: move;
top: 0;
}
.croppr-imageClipped {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
pointer-events: none;
}
.croppr-handle {
border: 1px solid black;
background-color: white;
width: 10px;
height: 10px;
position: absolute;
z-index: 4;
top: 0;
}