Hi,
canvas.toDataURL("image/jpg") is working when I’m using an image that is local.
Like this this.originalImage = 'assets/img/defaultImage-900.jpg';
When I change it to a picture from the camera its not working.
Like this this.originalImage = "data:image/jpeg;base64," + imageData;
This worked before I updated to iOS 10.3.1…
How do i fix?
What I want do to is to merge two images (900x900) on top of each other, to one image.
save() {
//get filter index
this.selectedFilter = this.slides.getActiveIndex();
// run the canvas thing
this.applyFilter(this.filters[this.selectedFilter]).subscribe(() => {
//done
});
}
Apply the filter on this.originalImage(base64 image from the camera)
applyFilter(filterUrl: string) {
return Observable.create((observer: any) => {
let baseImg = new Image();
let filterImg = new Image();
let canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
baseImg.src = this.originalImage;
baseImg.onload = () => {
canvas.width = baseImg.width;
canvas.height = baseImg.height;
ctx.drawImage(baseImg, 0, 0);
filterImg.src = filterUrl;
filterImg.onload = () => {
let hRatio = canvas.width / filterImg.width;
let vRatio = canvas.height / filterImg.height;
let ratio = Math.max(hRatio, vRatio);
let centerShift_x = (canvas.width - filterImg.width * ratio) / 2;
let centerShift_y = (canvas.height - filterImg.height * ratio) / 2;
ctx.drawImage(filterImg, 0, 0, filterImg.width, filterImg.height, centerShift_x, centerShift_y, filterImg.width * ratio, filterImg.height * ratio);
this.resultImage = canvas.toDataURL("image/jpg");
observer.next();
}
};
});
}
Camera settings
// set options
let options = {
quality : 30,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : 1,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
cameraDirection: Camera.Direction.FRONT,
correctOrientation: true,
saveToPhotoAlbum: false,
targetHeight: 900,
targetWidth: 900
};
Camera.getPicture(options).then((imageData) => {
this.zone.run(() => {
this.originalImage = "data:image/jpeg;base64," + imageData;
});
}, (err) => {
if(this.originalImage == null || undefined){
this.navCtrl.setRoot(SocialTabsPage, { tabIndex: 0 });
}
});
