Javascript Cordova Instagram插件:与JPG图像一起使用?

Javascript Cordova Instagram插件:与JPG图像一起使用?,javascript,angularjs,cordova,canvas,Javascript,Angularjs,Cordova,Canvas,我正在开发一款移动应用程序,它使用了一个可以在Instagram上共享图像的浏览器;插件函数要求图像输入必须是(1)画布ID或(2)base64 PNG数据URL 因为将图像从JPG转换为PNG似乎并不理想(尤其是因为图像是照片状/复杂的,PNG比JPG大得多),所以我想尝试将JPG附加到画布上,然后将画布ID传递给插件函数 我的代码: HTML(使用AngularJS指令在原始照片和应用程序过滤器转换的照片之间切换) 然而,这种情况根本不起作用。控制台中没有显示任何错误;该功能不会在点击/单击

我正在开发一款移动应用程序,它使用了一个可以在Instagram上共享图像的浏览器;插件函数要求图像输入必须是(1)画布ID或(2)base64 PNG数据URL

因为将图像从JPG转换为PNG似乎并不理想(尤其是因为图像是照片状/复杂的,PNG比JPG大得多),所以我想尝试将JPG附加到画布上,然后将画布ID传递给插件函数

我的代码:

HTML(使用AngularJS指令在原始照片和应用程序过滤器转换的照片之间切换)

然而,这种情况根本不起作用。控制台中没有显示任何错误;该功能不会在点击/单击时启动

有人知道这是怎么回事吗


因为文档不是很清楚,所以画布可能需要附加一个PNG图像(即我传递的JPG不起作用)。在这种情况下,有没有办法将JPG转换为PNG?

解决了这个问题:我需要返回完整的dataURL,包括开头的编码信息,而不仅仅是Base64字符串

因此,我将函数的返回语句更改为:

返回dataURL.replace(/^data:image\/(png | jpg);base64,/,“”)

致:

返回dataURL


而且它有效

我从小事做起。确保点击事件正确触发(将一些可见文本作为结果);检查您的funxtion是否已被调用。从您发布的代码中,我不确定您在哪里将canvas'ID设置为“transformedImage”?我认为ID=“transformedImage”只是选择
img
元素,以便将其传递到
getBase64Image
函数中。我认为该函数不需要为其分配该id。但是,谢谢您&我将尝试控制台日志记录来查看发生了什么。
<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>
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.');
      }
    });
  };