Is it possible to use actual image from Phonegap plugin Canvas2Image? - javascript

I am using the Phonegap plugin Canvas2Image: https://github.com/devgeeks/Canvas2ImagePlugin and I was wondering if it would be possible to get the rendered image in the callback?
I am using the code out of their documentation:
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log(msg);
},
function(err){
console.log(err);
},
document.getElementById('myCanvas')
);
This works great to save to the library as intended, but if I want to use the actual photo.png or whatever is generated, can I do this? If not, is there a way in the callback to get the local filesystem URL to the image?

The first function, with msg in the parameter, is going to be your file URL. However, it only is calling back on android. IOS is not working at this time. On the github site, there is an open issue on the matter. I haven't verified it, but someone said that iPhone: How do I get the file path of an image saved with UIImageWriteToSavedPhotosAlbum()? helps to fix the issue.
Github issue: https://github.com/devgeeks/Canvas2ImagePlugin/issues/38

Related

Rendering images in a webshot pdf on Meteor's Galaxy

I have a pdf that is rendered from a server side html file in my Meteor application using webshot. This pdf is displayed in the browser, and also attached to an email to be sent to various users. Since migrating over to Meteor's Galaxy platform, I am unable to render the images in the html file, and the email attachment doesn't work correctly. My set up worked perfectly on Digital Ocean with Ubuntu 14.04, and also on my localhost. It still works perfectly at both of these environments, but doesn't work with Galaxy. (it's worth noting I don't know much about programming email attachments, but used Meteor's email package, which is based on mailcomposer)
The pdf renders, so I know phantomjs is working, and webshot is taking a screenshot and displaying it as a pdf, so I know webshot is working. However, the images won't render and when attaching to an email, the file is corrupted/doesn't send correctly. I have tried logging the html to ensure that the URLs to the image files are all correct, and they are when deployed to Galaxy, but they just won't render with phantomjs/webshot. I am using the meteorhacks:ssr package to render the html file on the server before reading it with phantomjs.
I've tried contacting Galaxy support about this, but haven't had much assistance. Has anyone else experienced this? I'm struggling to even pinpoint the package causing the issue to submit a pull request if I need to. Thanks!
So I figured out my problem, which I'll share with others, but I'll also share a few pointers on debugging webshot in an app running on Galaxy's servers.
First, webshot doesn't pipe errors to the Galaxy's logs by default, as it's running on a spawned node.js process, so you need to change this line in your 'project_path/.meteor/local/isopacks/npm-container/npm/node_modules/webshot/lib/webshot.js' file (note, I'm still on Meteor 1.2, so this is wherever your npm webshot package is located):
// webshot.js line 201 - add , {stdio: "inherit"} to spawn method
var phantomProc = crossSpawn.spawn(options.phantomPath, phantomArgs, {stdio: "inherit"});
This passes all logs from the spawned process to your console. In addition to this, comment out the following code in the same file:
// comment out lines 234-239
// phantomProc.stderr.on('data', function(data) {
// if (options.errorIfJSException) {
// calledCallback = true;
// clearTimeout(timeoutID);
// cb(new Error('' + data))
// }
// });
Doing these two modifications will print logs from the phantomjs process to your Galaxy container. In addition to that, you will want to modify the webshot.phantom.js script that is located in the same directory to print to the console in order to debug. This is the script you will want to modify however you see fit to find your issue, but the phantomjs docs recommend using phantom callbacks to debug errors from the web page being loaded, such as:
page.onResourceError = function(resourceError) {
console.log('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');
console.log('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);
};
For my particular issue, I was getting an SSL handshake issue:
Error code: 6. Description: SSL handshake failed
To fix this, I had to add the following code to my webshot options object:
phantomConfig: {
"ignore-ssl-errors": "true",
"ssl-protocol": "any"
},
This fixed the issue with loading the static images in my pdf over https (note: this worked correctly on Digital Ocean without the code above, I'm not sure what is different in the SSL configuration on Galaxy's containers).
In addition, I was having issues with attaching the pdf correctly to an email my app sent. This turned out to be an issue with rendering the url correctly for email using Meteor.absoluteUrl() in the mailcomposer attachments filePath object. I don't know why Meteor.absoluteUrl() did not render my app's url correctly on Galaxy in an email attachment, as Meteor.absoluteUrl() works in other places in my app, and it worked on Digital Ocean, but it didn't work here. When I switched the attachment object over to a hard coded URL, it worked fine, so that might be something worth checking if you are having issues.
I know quite a few Meteor developers have used webshot to create pdf's in their app, and I'm sure some will be migrating to Galaxy in the future, so hopefully this is helpful to others who decide to switch to Galaxy. Good luck!

Phonegap: Can't get Email Composer to work

I've spent a couple of days trying to implement emailing functionality to my app, but I can't get it to work.
I'm trying to use the plugin (or plugins, as description claims) from here: https://build.phonegap.com/plugins/705
I've added the following code to my XML file:
<gap:plugin name="de.appplant.cordova.plugin.email-composer" version="0.8.1" />
Then for testing I created a simple page with a simple code, just to see how it would look. Here is how my JS piece looks:
document.addEventListener('deviceready', function(){
$('#composertest').click(function(){
alert('tapped');
window.plugin.email.isServiceAvailable(function (isAvailable) {
if (!isAvailable){
alert('Service is not available');
}else {
alert('Service is available');
}
});
window.plugin.email.open();
alert('worked(?)');
});
}, false);
The weird thing is that I get both alerts "tapped" and "worked", so if there would be an error, the last alert shouldn't be executed. However I don't get any popup or new window, the plugin seems to do nothing. Alerts about the service don't fire. I've tried to return the type of window.plugin.email in alert and it wrote "Object", so it is not undefined.
I've tried so many things now (including other plugins) that I'm completely lost with clues. Last time I tried to remove JQMobile, but it didn't change anything. Right now the code is very simple and uses as few files as possible and still it doesn't work. I've also tried to make a lot of changes in the code (and also tried the exact example from the docs page) and never got to the point where plugin does anything.
Am I missing something? Is there a working example somewhere?
PS: Phonegap debugger doesn't return any errors, although I don't trust it too much, since it's quite buggy.
If you just want to send a mail within PhoneGap you can just use mailto URI scheme.
Here are some links:
http://css-tricks.com/snippets/html/mailto-links/
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_mailto
This will send an email intent in Android then the user can choose which app to open the mail in.

Zombie.js - Downloading files support

I'm trying to handle download prompts in Zombie.js, looking through the API I don't see anything indicating how to do so.
Basically what I'm trying to do is navigate through an authentication required website, then click a button on the site (no href) that then automatically engages a download. The downloaded file will then be renamed and sent to a specified folder.
Is there a way to achieve this?
Zombie.js doesn't seem to provide a method to directly do what you want, but internally it uses request to download files, then emits a response event which you can listen for (see resources.coffee):
var browser = new Zombie();
browser.on('response', function(request, response) {
browser.response = response;
});
browser.visit('http://test.com/', function() {
browser.clickLink('Download the file', function() {
// the 'response' handler should have run by now
var fileContents = browser.response.body;
});
});
This seems to work pretty well for me.
possibly try:
http://phantomjs.org
you should be able to manipulate the dom...to download.
https://github.com/ariya/phantomjs/wiki/Page-Automation
might have to write a separate script to do the file renaming.
As far as I know, and from taking a detailed look at the API of Zombie.js, I'd say no, this is not possible.
I know it's not the answer you hoped for, but truth is not always nice.

Permission Denied using Javascript/jQuery on a local file

function publish(text) {
$('#helpdiv').prepend(text);
}
function get_help(topic) {
$.get(topic, publish);
}
<p>Hi. click here for more help.</p>
<div id="helpdiv"></div>
I've inherited this chunk of HTML and javascript above (snippet). It is/was going to be used as local help. Currently it is online only and it works fine. However, when I copy the files locally, I get "Permission Denied" in Internet Explorer and in Chrome doesn't do anything when I "click here for more help". What it's supposed to do is load the help content from inline-help.html and display it in the helpdiv div. Now here is the kicker, if I take the same files and copy them to inetpub on my PC and load them as http://localhost/hello.html it functions perfectly.
Presumably this is a security thing where the "local" zone isn't allowing me to load files off of the user's HD? But I'm not really sure what's going on and would like to understand this problem further and potentially come up with a workaround.
Any insight is greatly appreciated.
jquery's "get" uses xmlHttpRequest, which doesn't work on local files, unfortunately. If you really need to be able to fetch local data (or data from a different domain) asynchronously, you should use dynamic script tags. However that means the data file has to be reformatted as JSON data.
I don't think your browser is allowing you to run javascript locally (using the file:/// access method). But when you load it from http://localhost/ it works fine.
You need to either develop on a website, or use your localhost server.

SWFUpload ASP.Net example site not working?

http://swfupload.org/node/7/release
The .Net 2.0 sample is not working, has anyone faced the same thing and have been able to make it work?
The solution is compiling and the default page is opening normal in FireFox but when I click on the button nothing happen, and in IE the button is not appearing at all
A few things note with the SWFUploader is that although there is a .Net test project it is a little miss leading and does a lot more than is really required, its great if you want to upload images but dosn't have the progress bar or allow file uploads.
Make sure you get the source code form http://code.google.com/p/swfupload/ not the site, this will fix any issues you have with version 10 / 11 of flash not working.
To get any of the PHP demo working with .Net just make a file called upload.aspx to replace the upload.php with the following code in.
try
{
// Get the data
HttpPostedFile postedfile = Request.Files["Filedata"];
postedfile.SaveAs(Server.MapPath(".\\") + postedfile.FileName);
}
catch
{
// If any kind of error occurs return a 500 Internal Server error
Response.StatusCode = 500;
Response.Write("An error occured");
Response.End();
}
finally
{
Response.End();
}
Change the the default page name to html or .aspx and change the call inside to your new save script.
It will now save the files in the root of the website.
I was having this issue but what fixed it for me was getting the newest version of the swfupload controls. I didnt realize that the stuff you download off google source had the .net stuff in it as well, i was using the out of date controls off the .net page on their website.
if you go to http://code.google.com/p/swfupload/ get the "SWFUpload [version number] Samples.zip" and it has .net stuff in it, which i was able to get working just fine.
i got it, because my Flash version is 10 and SWF is not working with Flash player 10 as its not allowed in Flash player 10 to call a swf file, so the solution for that i putting the object its self on the page and make it as a button to make the user click on the object its self.

Categories