Question

我正在开发一款使用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 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.');
      }
    });
  };

然而，这种情况并不起作用。它没有在控制台中显示任何错误;点击/点击时该功能无法启动。

任何人都知道这里有什么（没有）？

因为文档并不是很清楚，所以画布可能需要附加一个PNG图像（即JPG I＆＃39; m pass in won not work）。在这种情况下，有没有办法将JPG转换为PNG？

Answer 1

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

所以我改变了函数的return语句：

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

为：

return dataURL;

它有效！

Cordova Instagram插件：使用JPG图像？

1 个答案: