Cordova Instagram 插件：与 JPG 图像一起使用？答案

【问题标题】：Cordova Instagram plugin: using with JPG images?Cordova Instagram 插件：与 JPG 图像一起使用？
【发布时间】：2015-09-05 18:26:21
【问题描述】：

我正在开发一个使用 Cordova plugin 的移动应用程序，该应用程序允许在 Instagram 上共享图像；插件功能要求图像输入必须是 (1) 画布 ID，或 (2) base64 PNG dataUrl。

因为将图像从 JPG 转换为 PNG 似乎并不理想（尤其是因为图像类似于照片/复杂，而且 PNG 将比 JPG 大得多），我想尝试将 JPG 附加到一个画布，然后将画布 ID 传递给插件函数。

我的代码：

HTML（使用 AngularJS 指令在原始照片和应用过滤器转换的照片之间切换）

<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 控制器

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.');
      }
    });
  };

但是，这种情况是行不通的。它不会在控制台中显示任何错误；该功能不会在点击/点击时触发。

有人知道这里发生了什么（不）吗？

由于文档不是很清楚，可能是画布需要附加 PNG 图像（即我传入的 JPG 不起作用）。在这种情况下，有没有办法将 JPG 转换为 PNG？

【问题讨论】：

我会从小处着手。确保单击事件正确触发（将一些可见文本作为结果）；检查您的功能是否已被调用。而且我不确定您发布的代码，您在哪里将画布的 ID 设置为“transformedImage”？
我认为 id="transformedImage" 只是选择 img 元素，以便可以将其传递给 getBase64Image 函数。我认为该函数不需要为其分配该 ID。但是谢谢您，并且会尝试控制台日志记录以查看发生了什么。

标签： javascript angularjs cordova canvas

【解决方案1】：

想通了：我需要返回完整的 dataURL，包括开头的编码信息，而不仅仅是 Base64 字符串。

所以我把函数的return语句从：

return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

到：

return dataURL;

它有效！

【讨论】：