Cordova Instagram插件:使用JPG图片

Cordova Instagram plugin: using with JPG images?

本文关键字：JPG 图片 使用 Instagram 插件 Cordova      更新时间：2023-09-26

我正在开发一个移动应用程序，该应用程序使用Cordova插件，允许在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/角控制器

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 ?

弄清楚了:我需要返回完整的dataURL，包括开始时的编码信息，而不仅仅是Base64字符串。

所以我改变了函数的返回语句

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

:

return dataURL;

，它工作!

相关文章：