I'm attempting to save a dataURL made from an HTML5 canvas to my mysql db.
I have ajax setup to pull the var I've made called "dataURL" and I'm setting dataURL to the canvas's img using this code:
dataURL = oCanvas.toDataURL();
my issue is the canvas's dataURL has alot of characters that don't work well in pulling for ajax so I need a way to encode it or manipulate it differently so my end result can be saved to a mysql db and then later "decoded" to display once again.
I know my AJAX works because if I set the var dataURL to something like "cheese" it saves in the database as cheese.
Any help would be much appreciated!
The data you receive from toDataUrl will be in a format like this:
data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... (very long string)
Firstly filter the data received to only the part after data:image/png;base64,
Then use whatever Base64 library your language provides to decode it to an array of bytes (or blob). If you are using Java: Apache Commons Codec
Here is an example in groovy:
def bytes = new Base64().decode(filteredData) as byte[]
You can save the decoded result to your database (to be retrieved later)
I actually ended up setting an event so when the image was done drawing it would set the dataURL to a hidden form element. No longer needed to pass it through ajax :). Thanks for the suggestion though.
Base64 encoding takes almost 4x as many bytes to encode an image. It is suggested to use window.atob to decode the base64 before transmission whether you are using ajax or regular forms. Of course IE doesn't support it but this looks like a shim.
Related
I'm developing a flash binary that execute an animation in some web pages, and during this time I want to get the current source code of the page and send it via a POST call.
To get current source code I execute some javascript like this :
src = ExternalInterface.call("function(){return document.documentElement.outerHTML;}");
At this point, no problem.
After that, as the source code could be very huge, I wanted to compress it, so I tried to work with BiteArray like this :
var dataSrc:ByteArray = new ByteArray();
dataSrc.writeUTFBytes(src); // xmlData is original XML string
dataSrc.compress();
At this point, how could I send this to some server script (here I use PHP) ?
I mean : I don't want to know how to send data to an URL (I will use URL Loader), but how should I set my variable ?
Directly dataSrc or data.toString() ?
After compressing with ByteArray, I just Base64Encode my result, transmit it to my server script, and in this script I Base64Decode and gzuncompress.
Why should I Base64Encode ? Because to transmit the data to the server, my data is converted in a string and doing this cause bit lose, and padding errors ... Base64Encode permits to convert each bit of my data in a valid string to communicate.
Can I use include in actionscript in some form?
var somevar = include "file.json";
Where "file.json" contains JSON data
It's not this simple, but possible. First, you have to embed a JSON file as is:
[Embed(source = 'file.json', mimeType='application/octet-stream')]
private static const YourJSON:Class;
Then, to get whatever is embedded (a String, a Bitmap, an SWF), you need to instantiate a variable with this type.
var somevar:String=new YourJSON();
Then you need to parse the JSON, the correct syntax for this varies by JSON and parsing library (this part is mainly determined by your Flash player target). RafH's answer has a syntax for an array and (IIRC) FP10 compatible library.
Also may want use ASC 2.0.
(from here)
New syntax allows you to use:
var h:Object = include 'conf.json'; // where conf.json contains correct JSON
No, include doesnt return a value and includes are done at compile time, so if the content of the include file change, you need to recompile the swf.
Not sure about you want to do, but it seems like loading / parsing an external JSON data file would be a better approach to look for.
Here is a good example : http://snipplr.com/view/56283/
I have RaphaelJS based canvas, where user can do some work. I need to do 2 things:
Save users work into database
Rastersize SVG (I use Apache Batik for that task)
For 1 https://github.com/jspies/raphael.serialize dumps Raphael's canvas to json, then jQuery.getJSON() to send it to the backend, where I need to convert it back to SVG to feed into Batik.
Does this flow seem reasonable? SVG -> JSON -> SVG conversion seems a bit overhead, is there a better way to do this?
Backend runs python/django. I use standard json package for JSON -> SVG, but sometimes it fails with syntax errors in the incoming json (mainly in font style properties). Did anyone face these issues?
What's the best way to store this data in the database? Just as a string?
Raphael.Export saves elements to SVG in any browser that Raphaël supports:
https://github.com/ElbertF/Raphael.Export
I've used it to save Raphaël drawings as PNGs server-side using Batik.
If you can get a handle on the root <svg> element from Raphael then you can convert this to the raw XML source (on the client) and just send that:
var svgAsXML = (new XMLSerializer).serializeToString(svg);
want to test my url service in browser but need to pass json format data.
I tried the below but no success:
http://locahost:8042/service/getinfo?body={"name":"H&M"}
or any tool that can be use to pass json formatted test data?
UPDATES1
I mean is to pass the json formatted data manually in browser's url address bar. Like as my example above. This is for quick testing only not for implementation.
Yes, you certainly can pass JSON in a URL Querystring. You just have to URLencode the JSON string first. As #dmn said, the data is probably better passed via POST because of GET's size restrictions.
The { and } characters are considered unsafe for unencoded use in a URL.
http://www.faqs.org/rfcs/rfc1738.html
Probably putting it in the GET won't be a good idea, since url parameters have a limit of 256 characters. It would be better if you use POST and put the JSON in the body and after that you can parse it using Jackson for example or gson ... and get the result as an object.
Yes you can Add Extension to chrome web-browser called 'Advance rest Client' and change contain header to application/json and make json object and post in pay load then hit send bottom it works for json object
enter image description here
This is how I am doing in my web service, I am passing a json and within the service I manage it.
Just do a URL query like this:
http://locahost:8042/service/getinfo?name=h%26m
%26 is the encoding of &
I am trying to send a generated PDF file (Apache FOP) to the client. I know this can be done by writing the array to the response stream and by setting the correct content type, length and so on in the servlet. My problem is that the whole app was built based on the idea that it will only receive/send JSON. In the servlet's service() method, I have this:
response.setContentType("application/json");
reqBroker.process(request, response);
RequestBroker is the class who processes the JSON (jackson processor), everything is generic and I cannot change it. On top of this, I have to receive the JSON from the request correctly, to access the data and generate my pdf. So those two lines are necessary. But when I send the response, I need to have another content type so that the pdf is displayed correctly in the browser.
So far, I am able to send the byte array as part of the JSON, but then I don't know how to display the array as PDF on the client (if smth like this is even possible).
I would like some suggestions on how can I send my pdf and set the right header, without messing with the JSON. Thanks.
JSON and byte arrays don't mix.
Instead, you should create an <iframe> and point it to a URL that returns a raw PDF.
Take a look here:How to send pdf in json, it lists couple of approaches that you can consider. The easiest way is to convert the binary data into string by using Base64 compression. In C#, this would mean a call to Convert.FromBase64String. However this has space overhead as Base64 compression means around +33% more memory. If you can get away with it, this is the least complicated solution. in case additional size is an issue you can think about zipping it up.