社交分享Cordova插件

Question

I am working with the Social Share Plugin ( https://github.com/bfcam/phonegap-ios-social-plugin ) and ImageFilter Plugin ( https://github.com/DrewDahlman/ImageFilter ). 我正在使用社交共享插件（ https://github.com/bfcam/phonegap-ios-social-plugin ）和ImageFilter插件（ https://github.com/DrewDahlman/ImageFilter ）。 I have both set up and functioning. 我已经设置并运行了。 What I am wanting to do is have a picture that I select from my photo library or take with the camera be the one that is shared instead of the predefined image. 我想要做的是从我的照片库中选择一张照片，或者用相机拍摄的照片作为共享的照片而不是预定义的图像。

<!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" width="100%"></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" height="100%"></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" height="100%"></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" height="100%"></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" height="100%"></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" height="100%"></div>
                    <div class="filterTitle">stark</div>
                </div>
            </div>
        </div>
        <!-- END IMAGE AREA -->


        </div>
    </div>
  </body>
</html>

Here is the js file. 这是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 + "'>");
}
}

I am struggling with what parameter I need to use to replace 'www/images/filters/stark.png' to get the image that is loaded in the (div class="photo") to be the image that is shared. 我正在努力使用什么参数来替换“ www / images / filters / stark.png”，以使（div class =“ photo”）中加载的图像成为共享图像。 Any help would be greatly appreciated. 任何帮助将不胜感激。 Thanks. 谢谢。

Answer 1

old issue, I know, but I just figured out what the problem is. 我知道这是一个老问题，但我只是想出了问题所在。 It's a bug (or not implemented feature) of the social sharing pluging. 这是社交共享插件的错误（或未实现的功能）。 Whilst it can share files with a path like this: /Users/blabla/../pic.jpg, it can't share pics from the file protocol: file:///Users/blabla/../pic.jpg. 尽管它可以使用以下路径共享文件：/Users/blabla/../pic.jpg，但不能共享文件协议中的图片：file：///Users/blabla/../pic.jpg。

The camera function of Phonegap uses the file protocol, hence the failure. Phonegap的摄像头功能使用文件协议，因此失败。

Now the good news: use this plugin, it's an extended version of the one you were using: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin (PhoneGap Build compatible). 现在好消息是：使用此插件，它是您所使用的插件的扩展版本： https : //github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin （与PhoneGap Build兼容）。

Answer 2

I think you can solve this if you move var.largeImage inside the app namespace. 我认为如果将var.largeImage移动到app名称空间内，则可以解决此问题。 Then you can change 那你可以改变

<div class="btn" id="share" onClick="window.plugins.social.share('', '', 'www/images/filters/stark.png');">Share</div> to something like <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>

You'll probably have to use this.largeImage in your JavaScript file. 您可能必须在JavaScript文件中使用this.largeImage 。

社交分享Cordova插件

问题描述

2 个解决方案

解决方案1
1 2013-09-30 18:04:51

解决方案2
0 2013-05-13 15:47:37

社交分享Cordova插件

问题描述

2 个解决方案

解决方案1 1 2013-09-30 18:04:51

解决方案2 0 2013-05-13 15:47:37

解决方案1
1 2013-09-30 18:04:51

解决方案2
0 2013-05-13 15:47:37