Cordova Instagram plugin: using with JPG images?

cordova
1

I’m working on an Ionic app that uses a Cordova plugin that allows sharing images on Instagram; the plugin function requires that the image input must be either (1) a canvas ID, or (2) a base64 PNG dataUrl.

Because transforming the image from a JPG to a PNG doesn’t seem ideal (esp since the images are photo-like/complex and PNGs will be much larger than JPGs), I’d like to try to attach the JPG to a canvas and then pass in the canvas ID to the plugin function.

My code:

HTML (uses AngularJS directives to toggle between the original photo & the one transformed by the app’s filter)

<div class="item item-image" ng-click="showOrig = !showOrig">
  <img ng-src={{imgUrl}} ng-if="!showOrig" id="transformedImage">
  <img ng-src={{imgUrlOrig}} ng-if="showOrig">
</div>

JS/Angular controller

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }

  $scope.shareInstagram = function() {
    Instagram
    .share(getBase64Image(document.getElementById("transformedImage")), 'some caption', function(err) {
      if (err) {
        console.log('error: ', err);
      } else {
        console.log('Instagram share success.');
      }
    });
  };

However, this scenario just doesn’t work. It doesn’t show any error in the console; the function doesn’t fire on tap/click.

Anyone have any idea what’s (not) going on here?

Because the documentation isn’t really clear, it might be the case that the canvas needs to have a PNG image attached to it (i.e. the JPG I’m passing in won’t work). Is there a way to transform the JPG to a PNG in that case?