I'm trying to take screenshot of current page and share via facebook, whats app, instagram, twitter etc., using phonegap. But was unable to do that properly.
I tried out this code but it doesn't work. Can anyone help me to solve this?
function report() {
let region = document.querySelector("body"); // whole screen
html2canvas(region, {
onrendered: function(canvas) {
let pngUrl = canvas.toDataURL();
let img = document.querySelector(".screen");
img.src = pngUrl; // pngUrl contains screenshot graphics data in url form
window.plugins.socialsharing.share(img.src);
// here you can allow user to set bug-region
// and send it with 'pngUrl' to server
},
});
}
Related
I'm new in flutter.
Hope my issue below will be same your issue in the past. And you can help me for this:
My situation is:
My app will capture an photo (using package camera: ^0.5.8+2). Then, this photo will be saved on gallery of user device (using package gallery_saver: ^2.0.1). Finally, I will open the gallery (using package photo_manager: ^0.5.7) to pick some photos which I captured before ==> This flow is really clear and simple, right? ^_^
But, I have already trap at this issue:
After I captured an photo, then open the gallery from my app, I can't see this photo (Althought I can see this photo on device gallery). I also print the log on console to make sure that: my recently photo was got by my app. But, I still see nothing, it's mean my app also can't read this recently photo.
So, what do I wrong? Or what am I missing? Everyone who have experience about this issue help me, pls!
Below is my source code:
This is function to take photo by using camera package (https://pub.dev/packages/camera)
/// Take an photo
_takePhoto() async {
try {
if (_numberPhotoTaken < widget.maxTaken) {
/// Path
var file = "${DateTime.now().toString()}.jpg";
var temporaryDir = (await getTemporaryDirectory()).path;
var pathSaved = join(temporaryDir, file);
/// Take photo
await _cameraController.takePicture(pathSaved);
/// save to gallery
GallerySaver.saveImage(pathSaved, albumName: galleryFolder).then((ok) {
if (ok) {
setState(() => _numberPhotoTaken++);
}
/// remove temporary file
File(pathSaved).delete();
});
} else {
AppDialog.inform(
this.context,
textLocale("Reached the maximum number of photos", this.context),
() {});
}
} on CameraException catch (e) {
} on Exception catch (ex) {
}
}
This is function to load asset from gallery by using photo manager package (https://pub.dev/packages/photo_manager)
/// fetching gallery's asset
/// return: list of asset entity in specific page
Future<List<GalleryEntity>> _fetchGalleryPaging() async {
/// load all assets in one album list
List<AssetPathEntity> albums = await PhotoManager.getAssetPathList(
onlyAll: true, type: RequestType.common);
List<AssetEntity> page = await albums[0].getAssetListPaged(_currentPage, widget.perPage);
/// return gallery entity list
return page.map<GalleryEntity>((e) => GalleryEntity(asset: e)).toList();
}
I'm currently test on my android device
When I open gallery on device, I wonder: the new photo which I have just captured not be arranged right (the newest photo must be at the end of gallery). After a few time (I'm not sure how many time), device gallery will auto refresh, and my recently photo will be arranged in the right way (it's at the end of gallery). And my app will read this photo perfectly (so strange for me)
UPDATE: one more thing, my photo will be saved into a separated folder in gallery
If you read till this line. I'm so appreciate about that. And I hope among of you have experience to solve this issue
Thanks all guys,
After a few time I made searching about my issue. I find out the main problem is the external storage was not rescan when I did an capturing photo, so my flutter app can not be display the new photo on gallery.
The solution for this issue is the package:
https://github.com/hui-z/image_gallery_saver
I'm not sure about the effective of this package, but for my scene, it's work as perfect as I wish.
Hope this help for anyone who also face same issue like me
Thanks all
How do you include a picture in Titanium's Facebook Module dialog? In Titanium's example, the picture property in the dialog is a link of a picture from a website:
var data =
{
link : "http://www.appcelerator.com",
name : "Appcelerator Titanium Mobile",
message : "Checkout this cool open source project for creating mobile apps",
caption : "Appcelerator Titanium Mobile",
picture : "http://developer.appcelerator.com/assets/img/DEV_titmobile_image.png",
description : "You've got the ideas, now you've got the power. Titanium translates " +
"your hard won web skills into native applications..."
};
fb.dialog("feed", data, function(e)
{
if(e.success && e.result)
{
alert("Success! New Post ID: " + e.result);
}
else
{
if(e.error)
{
alert(e.error);
}
else
{
alert("User canceled dialog.");
}
}
});
But what if you want to use a picture that's local and NOT via a link of a website like this?
var data =
{
link: "http://play.google.com/",
name: "Android app's name",
picture: "file:///data/data/com.appid/app_appdata/directory/name-of-image.jpg"
};
I get the picture property formatting error if I use the code above. See this image for visual reference: http://postimg.org/image/wjefdlalb/
I've tried using the FileSystem like this:
function getFile()
{
var imageFileToPost;
var imageFile = Ti.Filesystem.getFile("file:///data/data/com.appid/app_appdata/directory/name-of-image.jpg");
if (imageFile.exists())
{
console.log("exists");
imageFileToPost = imageFile.read();
}
return imageFileToPost;
}
var data =
{
link: "http://play.google.com/",
name: "Android app's name",
picture: getFile()
};
And the post is successful, there are no errors BUT the picture was NOT published on Facebook.
Note: I would use the graph but I need to use permissions like 'publish_actions' which means I have to to have Facebook review the app but they don't like prefill messages even when the user can edit message anyways. So is this really just a formatting issue with Facebook Module's dialog or it only takes URLs of a picture? If it's a formatting issue, can anyone tell me how to format this correctly because I really need to use the picture that's local and not from a website?
The answer is maybe a bit late, but I had the same issue recently.
It does not seem to be possible with the current version of the Facebook module to create a dialog to share local images.
Because I also needed this functionality for one of my apps, I forked the module (https://github.com/dthulke/ti.facebook) and added a method presentPhotoShareDialog which takes an image blob as argument. Unfortunately it only works if the native Facebook app is installed.
Example:
if (fb.getCanPresentShareDialog()) {
fb.presentPhotoShareDialog({
imageBlob : view.toImage()
});
}
I have an Android app with a requirement to upload a picture from the Android device to a Page that the user has Liked, using the Feed dialog. (The user is not an administrator of the Page.) I have not been able to get this to work in a way that actually displays the picture on the Page's timeline. I am going to describe what I have done, what happens, and what I would like to see; hopefully someone can help me out.
Here is the sequence of events that happens right now:
Within the app, the user connects to Facebook using the Login button provided by the Android SDK.
The user takes a picture using the app which is stored on the local device.
The app uploads the picture to one of the user's Facebook albums.
The app constructs a URL that points to the picture in the user's album.
The app invokes the Feed dialog with these parameters. "pictureUrl" is the URL that was built in step 4; "pageFbId" is the internal Facebook ID of the Page on which the picture should appear.
Bundle params = new Bundle();
params.putString("link", pictureUrl);
params.putString("to", pageFbId);
The user completes the entry in the Feed dialog.
The page's timeline shows the text entered by the user in the Feed dialog and a link to the picture in the user's album.
Is there a way to do this so that Facebook actually shows the picture on the Page's timeline, instead of just a link to the picture?
Thanks!
Example: Setting picture parameter in Facebook Feed dialog via JS SDK.
IOS, Adroid examples to come.
<script>
function feedthis() {
var obj = {
method: 'feed',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'https://developers.facebook.com/images/devsite/developers_og_image.png',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Test via spoof Post',
properties: [
{ text: 'Link Test 1', href: 'http://example.com'},
{ text: 'Link Test 2', href: 'http://example.com?ref=1'},
],
actions: [
{ name: 'via Test App', link: 'http://anotherfeed.com'}
]
};
function callback(response) { // get post id here from response object.}
FB.ui(obj, callback);
}
</script>
The code below works to share an image. I'm having problems adding text to it without using a FB graph (which I dont want to do at this point). This code shares an image straight to Facebook but:
1) how do I also share text? I know how to do one or the other but cant seem to figure out both.
2) is it possible to have Facebookj scale the image?
Thank you for your help.
int imageToShare = getResources().getIdentifier(myCard.getImageId(),"drawable","com.gjnave.carddisplayertemplate");
Uri cardImageUri = Uri.parse("android.resource://com.gjnave.carddisplayertemplate/" + imageToShare);
bmpImage = MediaStore.Images.Media.getBitmap(this.getContentResolver(), cardImageUri);
performPublish(PendingAction.POST_PHOTO, false);
I did a PhoneGap Android app that starts the camera, a picture is taken and saved to sdcard. The app shows the picture on the initial screen. The app also allows to navigate through some additional web pages. If I navigate away (to another web page) and come back to the first screen, the picture is no longer there. I tried to get it from the sdcard and show it using the HTML tag, to be seen even before another picture is taken, but the picture is not shown (I see the "alt" text instead).
I am not sure whether my problem is clear, but I am ready to answer your questions to clarify it.
My project is in the GitHub at the address https://github.com/monicamarcus/Android_PhoneGap
Anyone can help me? Thanks!
The Javascript that shows the picture the first time:
//Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
var smallImage = document.getElementById('cameraPic');
smallImage.style.display = 'block'
smallImage.src = "data:image/jpeg;base64," + imageData;
}
Try this:
function onPhotoDataSuccess(imageData) {
localStorage.img="data:image/jpeg;base64,"+imageData;
var smallImage = document.getElementById('cameraPic');
smallImage.src= localStorage.img;
smallImage.style.display = 'block';
}
document.addEventListener('deviceready',function(){
if(typeof(localStorage.img)!='undefined'){
smallImage=document.getElementById('cameraPic');
smallImage.src=localStorage.img;
smallImage.style.display='block';
}
},false);