Hi, recently I have succeed inserting a watermark for image that captured with camera in my apps. But the problem is I don’t know how to share the watermarked image to Instagram. The share function is only working to upload original image which does not have watermark on it.
To make it clear, this is how the function works:
Capture Image with Camera in Apps > Click on button to add watermark > To share, Click another share button
But its not working with the watermarked image.
Here is my Camera.html
<img src="assets/imgs/as 2.png" (click)="takePhoto()"/>
<ion-row>
<ion-col>
<ion-buttons>
<button ion-button color="dark" (click)="takePhoto()"> Click here to take picture </button>
<button ion-button color="secondary" (click)="addImageWatermark()" [disabled]="!base64Image">Add Image Watermark</button>
</ion-buttons>
</ion-col>
</ion-row>
<img src="assets/imgs/click.png"/>
<ion-grid>
<ion-row>
<ion-col col-6 *ngFor="let photo of photos; let id = index">
<ion-card class="block">
<ion-icon name="trash" class="deleteIcon" (click)="deletePhoto(id)"></ion-icon>
<img [src]="photo" *ngIf="photo" #previewimage/>
<button ion-button class="share" (click)="shareImage()" [disabled]="!base64Image">Share to Instagram</button>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
This is the .ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Instagram } from '@ionic-native/instagram';
import { Camera, CameraOptions } from '@ionic-native/camera';
import * as watermark from 'watermarkjs';
@IonicPage()
@Component({
selector: 'page-camera',
templateUrl: 'camera.html',
})
export class CameraPage {
@ViewChild('previewimage') waterMarkImage: ElementRef;
currentImage = null;
public photos : any;
public base64Image : string;
constructor(public navCtrl: NavController, public navParams: NavParams, private camera: Camera, private instagram: Instagram, private alertCtrl : AlertController) {
}
ngOnInit() {
this.photos = [];
}
deletePhoto(index) {
let confirm = this.alertCtrl.create({
title: 'Sure you want to delete this photo? There is NO undo!',
message: '',
buttons: [
{
text: 'No',
handler: () => {
console.log('Disagree clicked');
}
}, {
text: 'Yes',
handler: () => {
console.log('Agree clicked');
this.photos.splice(index, 1);
}
}
]
});
confirm.present();
}
takePhoto() {
const options : CameraOptions = {
quality: 100, // picture quality
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options) .then((imageData) => {
this.base64Image = "data:image/jpeg;base64," + imageData;
this.photos.push(this.base64Image);
this.photos.reverse();
}, (err) => {
console.log(err);
});
}
addImageWatermark() {
watermark([this.base64Image, 'assets/imgs/as.png'])
.image(watermark.image.lowerRight(0.6))
.then(img => {
this.waterMarkImage.nativeElement.src = img.src;
});
}
shareImage() {
this.instagram.share(this.base64Image, '#PSKT #mobileapplication #aniscantik #tagmeinapost #ICTgempakgilerz @psktofficial')
.then(() => {
// Image might have been shared but you can't be 100% sure
})
.catch(err => {
// Handle error
console.error(err);
})
}
}
THANK YOU IN ADVANCE!
