我正在开发一个使用 Cordova plugin 的移动应用程序允许在 Instagram 上分享图像;插件功能要求图像输入必须是 (1) Canvas ID 或 (2) base64 PNG dataUrl。
因为将图像从 JPG 转换为 PNG 似乎并不理想(特别是因为图像类似于照片/复杂,并且 PNG 会比 JPG 大得多),所以我想尝试将 JPG 附加到一个 Canvas ,然后将 Canvas 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.');
}
});
};
但是,这种情况根本行不通。控制台中没有显示任何错误;该功能不会在点击/单击时触发。
有人知道这里发生了什么(没有)吗?
由于文档不太清楚, Canvas 可能需要附加 PNG 图像(即我传递的 JPG 不起作用)。在这种情况下有没有办法将 JPG 转换为 PNG?
最佳答案
弄清楚了:我需要返回完整的 dataURL,包括开头的编码信息,而不仅仅是 Base64 字符串。
所以我将函数的返回语句更改为:
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
至:
返回数据URL;
它有效!
关于javascript - Cordova Instagram 插件 : using with JPG images?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32416377/