社交分享 Cordova 插件
Posted
技术标签:
【中文标题】社交分享 Cordova 插件【英文标题】：Social Share Cordova Plugin 【发布时间】：2013-05-09 18:38:18 【问题描述】：我正在使用社交分享插件 (https://github.com/bfcam/phonegap-ios-social-plugin) 和 ImageFilter 插件 (https://github.com/DrewDahlman/ImageFilter)。我已经设置和运行。我想要做的是从我的照片库中选择一张照片，或者用相机拍摄一张共享的照片，而不是预定义的图像。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<!-- CORE -->
<script src='js/core/cordova-1.6.0.js'></script>
<script src='js/core/jQuery.js'></script>
<!-- PLUGINS -->
<script src='js/plugins/ImageFilter.js'></script>
<script src='js/core/social.js'></script>
<!-- OUR SCRIPTS -->
<script src='js/init.js'></script>
<script>
window.plugins.social.available(function(avail)
if (avail)
// Show social widgets
else
// Social not supported
);
</script>
</head>
<body onload="app.bodyLoad()">
<div id="header"><img src="images/header.png" ></div>
<div id="wrapper">
<div id="content">
<!-- BUTTONS -->
<div id="buttons">
<div class="btn" id="camera" onClick="app.useCamera();">use camera</div>
<div class="btn" id="roll" onClick="app.useRoll();">use library</div>
<div class="btn" id="share" onClick="window.plugins.social.share('', '', 'www/images/filters/stark.png');">Share</div>
</div>
<!-- END BUTTONS -->
<!-- IMAGE AREA -->
<div id="imageArea">
<!-- OUR IMAGE -->
<div class="photo"></div>
<!-- FILTERS -->
<div id="filters">
<div class="filter" id="none" onClick="filters.none(largeImage);">
<div class="filterIcon"><img src="images/filters/none.png" ></div>
<div class="filterTitle">none</div>
</div>
<div class="filter" id="sunnySide" onClick="filters.sunnySide(largeImage);">
<div class="filterIcon"><img src="images/filters/sunnySide.png" ></div>
<div class="filterTitle">sunnySide</div>
</div>
<div class="filter" id="worn" onClick="filters.worn(largeImage);">
<div class="filterIcon"><img src="images/filters/worn.png" ></div>
<div class="filterTitle">worn</div>
</div>
<div class="filter" id="vintage" onClick="filters.vintage(largeImage);">
<div class="filterIcon"><img src="images/filters/vintage.png" ></div>
<div class="filterTitle">vintage</div>
</div>
<div class="filter" id="stark" onClick="filters.stark(largeImage);">
<div class="filterIcon"><img src="images/filters/stark.png" ></div>
<div class="filterTitle">stark</div>
</div>
</div>
</div>
<!-- END IMAGE AREA -->
</div>
</div>
</body>
</html>
这里是js文件。
var largeImage;
var app =
bodyLoad: function ()
document.addEventListener("deviceready", app.deviceReady, false);
,
deviceReady: function ()
app.init();
,
init: function ()
,
useCamera: function ()
navigator.camera.getPicture(app.onCameraSuccess, app.onCameraFail,
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
//allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 910,
targetHeight: 910,
saveToPhotoAlbum: false
);
,
useRoll: function ()
navigator.camera.getPicture(app.onCameraSuccess, app.onCameraFail,
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 910,
targetHeight: 910,
saveToPhotoAlbum: false
);
,
onCameraSuccess: function (imageURI)
largeImage = imageURI;
$(".photo").html("<img src='" + imageURI + "'>");
$(".photo").show();
,
onCameraFail: function (msg)
console.log("ERROR! -" + msg);
;
var filters =
none: function (imageURI)
plugins.ImageFilter.none(filters.rendered,
image: imageURI,
save: 'false',
);
,
sunnySide: function (imageURI)
plugins.ImageFilter.sunnySide(filters.rendered,
image: imageURI,
save: 'false'
);
,
worn: function (imageURI)
plugins.ImageFilter.worn(filters.rendered,
image: imageURI,
save: 'false'
);
,
vintage: function (imageURI)
plugins.ImageFilter.vintage(filters.rendered,
image: imageURI,
save: 'false'
);
,
stark: function (imageURI)
plugins.ImageFilter.stark(filters.rendered,
image: imageURI,
save: 'false'
);
,
rendered: function (msg)
$(".photo").html("<img src='" + msg + "'>");
我正在努力解决我需要使用什么参数来替换“www/images/filters/stark.png”以使 (div class="photo") 中加载的图像成为共享的图像.任何帮助将不胜感激。谢谢。
【问题讨论】：
欺骗：***.com/questions/16441296/… ? 【参考方案1】：老问题，我知道，但我刚刚弄清楚问题出在哪里。这是社交分享插件的一个错误（或未实现的功能）。虽然它可以使用如下路径共享文件：/Users/blabla/../pic.jpg，但它不能共享来自文件协议的图片：file:///Users/blabla/../pic.jpg。
Phonegap的摄像头功能使用文件协议，因此失败。
现在好消息：使用这个插件，它是您使用的插件的扩展版本：https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin（PhoneGap Build 兼容）。
【讨论】：
【参考方案2】：我认为如果您将 var.largeImage 移动到 app 命名空间内，您可以解决此问题。然后你可以改变
<div class="btn" id="share" onClick="window.plugins.social.share('', '', 'www/images/filters/stark.png');">Share</div> 类似于
<div class="btn" id="share" onClick="window.plugins.social.share('', '', app.largeImage);">Share</div>
您可能必须在 javascript 文件中使用 this.largeImage。
【讨论】：
还是没有运气。我问了一堆不同的人，仍然没有找到解决方案。我很乐意将文件通过电子邮件发送给您以查看是否有帮助。我的电子邮件地址是 brawlins4@gmail.com。谢谢。 也许你可以把文件贴到 pastebin 什么的，我可以看看，虽然我通常不为 iOS 构建，但这似乎只是一个 JavaScript 问题。 当你说我需要将 var largeImage 移动到应用程序命名空间内时。我需要在应用程序命名空间中使用的 largeImage 节是什么？我尝试了一些不同的事情，但没有成功。感谢您的建议。 将它放在您的var app = .... 代码中，但不要放在任何函数中。然后在所有使用largeImage 的函数中，您必须使用this.largeImage。但是现在，当您在 JavaScript 之外，例如在主页上，您应该能够执行 app.largeImage 并获取其中包含的数据。
还是什么都没有。我已将 js 代码粘贴到 pastebin 中。这是链接pastebin.com/fGdQ2L6B。以上是关于社交分享 Cordova 插件的主要内容，如果未能解决你的问题，请参考以下文章
桌面/移动标准网页中的phonegap / cordova社交共享插件
Cordova 社交共享插件在 NetBeans 8 Cordova Build 中不起作用