I am building an Ionic2 app and my goal is following:
- To capture an image with camera
- Add some text (an overlay) to the captured image
- Share this overlayed image on social media (whatsapp/instagram/facebook)
I am already able to capture the image and share it on whatsapp etc. I can also, add some text, however this overlayed image I can not save (not sure if I really need to save it before sharing though) and can not share. For adding overlay I am using canvas. The value selected in the select box is overelayed on the captured image.
My html where I capture, show and share image:
I am building an Ionic2 app and my goal is following:
To capture an image with camera
Add some text (an overlay) to the captured image
Share this overlayed image on social media (whatsapp/instagram/facebook)
I am already able to capture the image and share it on whatsapp etc. I can also, add some text, however this overlayed image I can not save (not sure if I really need to save it before sharing though) and can not share. For adding overlay I am using canvas. The value selected in the select box is overelayed on the captured image.
My html where I capture, show and share image:
<ion-item>
<ion-label>Color</ion-label>
<ion-select [(ngModel)]="color">
<ion-option value="db" selected="true">Dark brown</ion-option>
<ion-option value="lb">Light brown</ion-option>
</ion-select>
</ion-item>
<ion-card>
<ion-card-content>
<!-- Capture the image with camera -->
<button ion-button (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</button>
<!-- Display the captured image with text on it -->
<button ion-button (click)="saveSharableImage()">
<ion-icon name="download"></ion-icon>
</button>
<img [src]="base64Image" *ngIf="base64Image" text="{{flavour}}" draw-text crossOrigin />
</ion-card-content>
</ion-card>
<!-- Share on social media -->
<div>
<ion-fab left bottom>
<button ion-fab color="dark"><ion-icon name="arrow-dropright"></ion-icon></button>
<ion-fab-list side="right">
<button ion-fab (click)="facebookShare()"><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab (click)="whatsappShare()"><ion-icon name="logo-whatsapp"></ion-icon></button>
</ion-fab-list>
</ion-fab>
</div>
The .ts that handles this:
takePicture(){
Camera.getPicture({
sourceType: Camera.PictureSourceType.CAMERA,
destinationType: Camera.DestinationType.DATA_URL,
quality:75,
/*targetWidth: 0,
targetHeight: 0,*/
// allowEdit: true,
saveToPhotoAlbum: true,
correctOrientation: true
}).then((imageData) => {
// imageData is a base64 encoded string
this.base64Image = "data:image/jpeg;base64," + imageData;
}, (err) => {
console.log(err);
});
}
saveSharableImage(){
let canvas = <HTMLCanvasElement>document.getElementById('canvas');
let dataURL= canvas.toDataURL();
this.base64Image = "data:image/jpeg;base64," + dataURL;
}
whatsappShare(){
SocialSharing.shareViaWhatsApp("Follow us on", this.base64Image /*Image*/, "http://www.schustercigars.de/" /* url */)
.then(()=>{
},
()=>{
alert("failed")
})
}
And the directive that handles overlay:
@Directive({
selector: '[draw-text]'
})
export class ImageDrawTextDirective {
@Input() text: any;
@HostListener('load', ['$event.target'])
onLoad(img) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.height = img.height;
canvas.width = img.width;
context.drawImage(img, 0, 0);
context.font = "100px impact";
context.textAlign = 'center';
context.fillStyle = 'black';
context.fillText(this.text, canvas.width / 2, canvas.height * 0.8);
img.src = canvas.toDataURL();
}
}
What has to be changed and how to achieve my goal? The button next to camera icon is supposed to save the overlayed image.