2013-05-08 137 views
1

我为Cordova使用社交分享插件(https://github.com/bfcam/phonegap-ios-social-plugin),并且我已经可以正常工作了。我想知道的是,如果有一种方法可以让你从共享的图像中获取图像,而不是预先定义的图像。我已经设置了拍照功能,并从我的图书馆中选择一个图像。谢谢。社交分享插件Cordova/Phonegap

我用这与这里的ImageFilter的插件是我的index.html页面代码

<!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> 

以下是图像过滤器插件,可以让我从我的图书馆或德选择图像的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 /图像/ local_image.jpg”为它分享我已采取或从库中选择图像挣扎的画面。

+0

here http://stackoverflow.com/questions/14411789/android-phonegap-version-2-0-or-higher-any-update-for-share-plugin-for-facebook是分步的明智代码插件 – MSTdev 2013-08-17 04:17:35

回答

0

该插件的自述文件说,你可以分享这样的事情:

window.plugins.social.share('This is the message you want to share', 'http://someurl.com', 'www/image/local_image.jpg'); 

因此,你应该能够分享您有任何图像,只需更换的“www /图像/ local_image.jpg”与您要共享的图像的路径。如果您已有代码拍摄照片或从您的照片库中选择一张照片,这应该是微不足道的。

+0

我不知道我需要用什么来替换“www/image/local_image.jpg”,才能让它分享我刚刚拍摄或从照片库中选择的照片。 – 2013-05-08 15:34:01

+0

它应该只是您刚刚拍摄或选择的图像的路径。看看http://cordova.apache.org/docs/en/2.7.0/cordova_camera_camera.md.html#camera.getPicture,特别是“拍照和检索图像文件位置”的例子。您会看到他们拍摄了一张照片,然后在onSuccess方法中可以访问该文件的URI。这是你需要使用的相同的URI。也许我并不完全了解你的问题,但如果你仍然需要帮助,你可以发布你使用的js代码吗? – MBillau 2013-05-08 16:03:42

+0

我已经发布了我上面使用的代码。任何想法,我需要取代'www/images/filters/stark.png'以让插件分享我选择或拍摄的照片? – 2013-05-10 13:01:07