Wikitude
How can we help you today?
PhoneGap Screen Capture/ImagePathBundle
7 CommentsSorted by Newest First
It's good the hear that you could impl. your image upload! Thx for sharing your experiences and solution. Hopefully someone else will find it helpfully as well.
Best regards
Andreas
Best regards
Andreas
Okay, after much digging I was able to figure out the issue and get this working. For anyone else looking in the future, here ya go:
When originally capturing the screenshot, I am calling (note I am changing the file name based on several parameters so as not to worry about overwrites):
app.wikitudePlugin.captureScreen(true, 'www/styles/images/scan' + localStorage.getItem('eventID') + "_" + d.getHours() + "_" + d.getMinutes() + "_" + d.getSeconds() + '.png', app.allmystuff.onScreenCaptured, app.allmystuff.onScreenCapturedError);
Then, after the callback, I am passing the file path that is returned to a function that in turn gets a file entry, then gets the file object from that entry:
onScreenCaptured: function (absoluteFilePath) {
uploadPhoto(absoluteFilePath);
....
}
function uploadPhoto(imageURI) {
window.resolveLocalFileSystemURL('file://' + imageURI, sendFile, errorHandler);
}
function sendFile(fileEntry){
fileEntry.file(winthething, failthething);
}
function winthething(file) {
var picReader = new FileReader();
var dataURL
picReader.onloadend = function (evt) {
dataURL = evt.target.result;
var blob = dataUriToBlob(dataURL);
...
...doing all my sending of my blob and such here...
...
...then I call another fileEntry so that I can remove the file...
window.resolveLocalFileSystemURL(file.localURL, reallyRemoveFile, errorHandler);
};
...initializing the read so that the onloadend function will fire...
picReader.readAsDataURL(file);
};
This is working on Android and iPhone, hope it will be useful to anyone else running into the issues I had.
When originally capturing the screenshot, I am calling (note I am changing the file name based on several parameters so as not to worry about overwrites):
app.wikitudePlugin.captureScreen(true, 'www/styles/images/scan' + localStorage.getItem('eventID') + "_" + d.getHours() + "_" + d.getMinutes() + "_" + d.getSeconds() + '.png', app.allmystuff.onScreenCaptured, app.allmystuff.onScreenCapturedError);
Then, after the callback, I am passing the file path that is returned to a function that in turn gets a file entry, then gets the file object from that entry:
onScreenCaptured: function (absoluteFilePath) {
uploadPhoto(absoluteFilePath);
....
}
function uploadPhoto(imageURI) {
window.resolveLocalFileSystemURL('file://' + imageURI, sendFile, errorHandler);
}
function sendFile(fileEntry){
fileEntry.file(winthething, failthething);
}
function winthething(file) {
var picReader = new FileReader();
var dataURL
picReader.onloadend = function (evt) {
dataURL = evt.target.result;
var blob = dataUriToBlob(dataURL);
...
...doing all my sending of my blob and such here...
...
...then I call another fileEntry so that I can remove the file...
window.resolveLocalFileSystemURL(file.localURL, reallyRemoveFile, errorHandler);
};
...initializing the read so that the onloadend function will fire...
picReader.readAsDataURL(file);
};
This is working on Android and iPhone, hope it will be useful to anyone else running into the issues I had.
Thank you for responding Andreas. I have not played around yet with the .mm file for overwriting, that is my next step once I get this issue resolved. Problem is, I am unable to get this to work even the first time. What sort of path is it expecting? See my project layout below, I want to save the image in the 'styles/images' folder within the application's path. The code happens in app.js which is linked in index.html For whatever reason, I can't seem to get my path to work (most recent attempt was '/styles/images/awesome.jpg'):
Project
|-Plugins
|---wikitude-phonegap-4.0.1-2.10
|---|---src and www live in here
|-AR (folder conainting world and imagerecognition stuff)
|-bin
...other library folders and such...
|-scripts
|---app.js
|-styles
|---images
|-cordova.js
index.html
Additionally, is there a way to return a DataURI instead of the path on a screencapture, as there is when using the camera functionality to snap a photo? If so, that would make things much simpler, because I am currently using the path to point a temporary canvas/image to so that i can build the dataURI for my blob, but if I could somehow get the function to return a datauri instead, pathing wouldn't be an issue:
onScreenCaptured: function (absoluteFilePath) {
uploadPhoto(absoluteFilePath);
...some code....then:
function uploadPhoto(imageURI) {
var d = new Date();
var mon = d.getMonth();
var dy = d.getDate();
if (mon.length === 1) { mon = "0" + mon }
if (dy.length === 1) { dy = "0" + dy }
var currDate = d.getFullYear() + "-" + mon + "-" + dy + " " + d.getHours() + "|" + d.getMinutes() + "|" + d.getSeconds();
var dateName = d.getFullYear().toString() + mon.toString() + dy.toString() + "_" + d.getHours().toString() + d.getMinutes().toString() + d.getSeconds().toString();
var c = document.createElement('canvas');
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function () {
c.width = this.width;
c.height = this.height;
ctx.drawImage(img, 0, 0);
};
img.src = imageURI;
var dataURL = c.toDataURL("image/jpeg");
var blob = dataUriToBlob(dataURL);
.....etc......
Again, hugely appreciate the help you are providing.
Hi Heath,
When storing the image in the photo library you can't get the image path. It will always return the message that the photo was saved into the library. If you need to access the image you need to add a UI to select if from the photo library.
If you need to have the image path you need to provide a image path (including the image name ;) ) where the photo should be saved.
You can play around with line 317 in the WTWikitudePlugin.mm file.
By default it should look like the following snippet:
WTScreenshotSaveOptions options = WTScreenshotSaveOption_SavingWithoutOverwriting | WTScreenshotSaveOption_CallDelegateOnSuccess;
You can either add or remove the 'WTScreenshotSaveOption_SavingWithoutOverwriting' and see what happens when you try to save another image with the same name.
Best regards
Andreas
When storing the image in the photo library you can't get the image path. It will always return the message that the photo was saved into the library. If you need to access the image you need to add a UI to select if from the photo library.
If you need to have the image path you need to provide a image path (including the image name ;) ) where the photo should be saved.
You can play around with line 317 in the WTWikitudePlugin.mm file.
By default it should look like the following snippet:
WTScreenshotSaveOptions options = WTScreenshotSaveOption_SavingWithoutOverwriting | WTScreenshotSaveOption_CallDelegateOnSuccess;
You can either add or remove the 'WTScreenshotSaveOption_SavingWithoutOverwriting' and see what happens when you try to save another image with the same name.
Best regards
Andreas
Hello Andreas,
Thanks for getting back to me.
First of all, do you know how to fix the ObjC code to return a valid path when saving an image in the photo library, as opposed to the string it currently returns ("Screenshot was added to the device Photo Library") on iOS? I am not a native ObjC developer, and have not been able to figure out a valid solution for this.
Additionally, thank you for letting me know about including a name and extension, I was unaware (thought I was only supposed to pass in a path), so I am attempting that now. That bein said, do you have an example of where and what to change in the plugin to auto override?
Thank you.
Thanks for getting back to me.
First of all, do you know how to fix the ObjC code to return a valid path when saving an image in the photo library, as opposed to the string it currently returns ("Screenshot was added to the device Photo Library") on iOS? I am not a native ObjC developer, and have not been able to figure out a valid solution for this.
Additionally, thank you for letting me know about including a name and extension, I was unaware (thought I was only supposed to pass in a path), so I am attempting that now. That bein said, do you have an example of where and what to change in the plugin to auto override?
Thank you.
Hi Heath,
Passing null as file path indicates that the image should be saved in camera roll so that's expected behaviour. If you pass a image path, don't forget to also pass a image name with extension!
app.wikitudePlugin.captureScreen(true, "www/styles/images/myImage.png", app.allmystuff.onScreenCaptured, app.allmystuff.onScreenCapturedError);
You need to change the name each time you save a image or delete the existing image before. There is a option to automatically override the image but this functionality is not mapped in JS. You would have to change the Wikitude Plugin ObjC code to do so (WTScreenshotSaveOptions).
Best regards
Andreas
Passing null as file path indicates that the image should be saved in camera roll so that's expected behaviour. If you pass a image path, don't forget to also pass a image name with extension!
app.wikitudePlugin.captureScreen(true, "www/styles/images/myImage.png", app.allmystuff.onScreenCaptured, app.allmystuff.onScreenCapturedError);
You need to change the name each time you save a image or delete the existing image before. There is a option to automatically override the image but this functionality is not mapped in JS. You would have to change the Wikitude Plugin ObjC code to do so (WTScreenshotSaveOptions).
Best regards
Andreas
Hello, I have been getting a lot of use out of your library, and so far things have been moving along pretty smoothly. Unfortunately, I am now running into an issue.
I am building an app that uses PhoneGap to grab a screenshot during the AR session. I then use this image for later functionality, using the imageURI. I have gotten it working just fine for android, using the following post:
https://support.wikitude.com/support/discussions/topics/5000079402
And while this solves the issue with Android, I cannot seem to get the screenshot to be saved in my app path for iOS. If I pass in null, the absaolute path that is returned is just a string stating "the image has been saved in the Photo Library) which does not help me, as I need to use this image for later functionality.
Currently, i am trying to call it with: app.wikitudePlugin.captureScreen(true, "www/styles/images/", app.allmystuff.onScreenCaptured, app.allmystuff.onScreenCapturedError);
but recieving an error saying that the path is not valid. I need to know how I can pass in a working bundle path for iOS, or how to pass in null and get the correct absolute file path back.
If i pass in null, instead of "www/styles/images/", the absolute path that is returned is: "Screenshot was added to the device Photo Library"
I found the code that is causing this in the WTWikitudePlugin.m file, but I am not very familiar with objectiveC, nor how to get the correct path:
- (void)didReceivedDidCatpuredScreenNotification:(NSNotification *)aNotification
{
CDVPluginResult *pluginResult = nil;
if (self.screenshotCallbackId)
{
NSDictionary *context = ;
WTScreenshotSaveMode mode = ;
NSString *resultMessage = nil;
if (WTScreenshotSaveMode_BundleDirectory == mode)
{
resultMessage = ;
}
else
{
// resultMessage = ;
resultMessage = @"Screenshot was added to the device Photo Library";
}
pluginResult = ;
;
}
;
}
Thank you for all your help!
I am building an app that uses PhoneGap to grab a screenshot during the AR session. I then use this image for later functionality, using the imageURI. I have gotten it working just fine for android, using the following post:
https://support.wikitude.com/support/discussions/topics/5000079402
And while this solves the issue with Android, I cannot seem to get the screenshot to be saved in my app path for iOS. If I pass in null, the absaolute path that is returned is just a string stating "the image has been saved in the Photo Library) which does not help me, as I need to use this image for later functionality.
Currently, i am trying to call it with: app.wikitudePlugin.captureScreen(true, "www/styles/images/", app.allmystuff.onScreenCaptured, app.allmystuff.onScreenCapturedError);
but recieving an error saying that the path is not valid. I need to know how I can pass in a working bundle path for iOS, or how to pass in null and get the correct absolute file path back.
If i pass in null, instead of "www/styles/images/", the absolute path that is returned is: "Screenshot was added to the device Photo Library"
I found the code that is causing this in the WTWikitudePlugin.m file, but I am not very familiar with objectiveC, nor how to get the correct path:
- (void)didReceivedDidCatpuredScreenNotification:(NSNotification *)aNotification
{
CDVPluginResult *pluginResult = nil;
if (self.screenshotCallbackId)
{
NSDictionary *context = ;
WTScreenshotSaveMode mode = ;
NSString *resultMessage = nil;
if (WTScreenshotSaveMode_BundleDirectory == mode)
{
resultMessage = ;
}
else
{
// resultMessage = ;
resultMessage = @"Screenshot was added to the device Photo Library";
}
pluginResult = ;
;
}
;
}
Thank you for all your help!
© 2023 Wikitude, a Qualcomm company
Heath Wilson
1 person has this problem