I been use this plugin for crop image but it can only crop image in square, and I don’t know how to crop in rectangle
Here is my code
takeThePhoto(pictureSourceType): Promise<any> {
return this.camera.getPicture(
{
destinationType: this.camera.DestinationType.FILE_URI,
mediaType: this.camera.MediaType.ALLMEDIA,
sourceType: pictureSourceType,
encodingType: this.camera.EncodingType.JPEG,
correctOrientation: true
}
).then(
fileUri => {
if (this.platform.is('android')) {
fileUri = 'file://' + fileUri;
}
return this.crop.crop(fileUri, {quality:100});
}, err => { } ).then(path => {
this.imgUrl = path
console.log(path)
}, err => { }
);
}
This is what it look like
- I want to crop image by resize width and height by my self, not always square.
I use this too, but I do not know how I can crop the image in rectangle , this plugin always allow me to crop only square only.
not sure if rectangle plugin available, you can search on web. hence there another plugin you can try if help … this mention it accept different custom aspect ratio https://github.com/krish-dev/cordova-plugin-k-imagecropper
3 Likes
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;
}