How to share a watermark-ed image to instagram


#1

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!


#2

Anyone can help me with it? :disappointed_relieved:


#3

According to this documentation https://www.npmjs.com/package/watermarkjs#usage, you can’t apply this method on a Base64 image, you can only apply it on a file (local or remote) ! You’d might want to save temporaly an image file to transform this one.

1- Modify your cameraOptions to save a physical file, to select the destinationType (CF https://ionicframework.com/docs/native/camera/#CameraOptions explaining… FILE_URI:1 to return image file URI, or NATIVE_URI:2 to return image native URI : You’ll better to generate a FILE_URI because you need a file, this previous post can help you on this part : Image preview not available using fileuri

2- You know the uri and you can apply the watermark method on the saved temporary file.

3- When getting the promise result, share the image, apparently a file is needed (CF https://github.com/vstirbu/InstagramPlugin#angularjsionic)

4- Now you have only to remove the temporary file to clear all, by using the File native component (https://ionicframework.com/docs/native/file/#removeFile).

Hope it helps you !


#4

Hi, current update: I am still working on it as per you told. I am still new to ionic but I will do my best! Will let you know if I’ve made it. Really appreciate your post tho, thank you so much!

xoxo :smiling_face_with_three_hearts: