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);
Related
I wan't to learn how connect some json file with after effects for rendering dynamic videos.
Eg i have a form in some webpage:
this form included one input which people are using there their name.
And then i create some json file like that array of objects with this form.
data = [
{
name: 'John'
},
{
name: 'Mike'
}
]
and i wan't to create with these json objects for each name some video about few second there will be shown just name from json and render some mp4 video.
How to do that?
which steps following?
if it will be web form i think i'll need to connect json file dynamically too right?
so after effects will read this json file from some url ?
There are many ways to go about doing this, but a single answer on Stack Overflow probably won't give you everything you need.
Network communication can be done using the CEP framework provided by Adobe which can then execute ExtendScript code which actually does the manipulation of the layers inside the AEP project file. You can use node modules to perform the network communication, and then write ExtendScript code to pass in the JSON data to that.
While not free, you might want to explore Dataclay's Templater extension to help you accomplish what you want. It not only does what you are asking out of the box, but it has some rules-based AI to reconfigure layers both temporally and spatially. You can point Templater to a URL that response with an array of JSON objects and have it process that data. In addition to this, it has event hooks which allow you to execute any script within the Shell or with the ExtendScript engine during its versioning process.
Hope this helps!
What is the best way to save object parameters to DB in ios? => like sending values to server application and server will save the parameters to db? And later that ios-app will get the properties and create the new object again.
What is the best way to do it? For ex, saving CALayer or UIImageView attributes like size, position, color, border width etc..
You have to create a data model which defines what this data looks like.
Once you have it, you will need to define some sort of REST api against your server to get/post/put/delete this data.
To implement this network layer you can look at:
https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/URLLoadingSystem/Articles/UsingNSURLSession.html
AFNetworking and RestKit are other useful libs to consider
To store locally you can look at CoreData - https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/CoreData/cdProgrammingGuide.html
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.
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.
I'm working on a project where I'm looking to store raw svg data inside my mongodb. Right now, it appears a bit goofy because I need to escape the svg string like so:
{ "_id" : ObjectId("4c61e60d4d02da615f175b6e"), "name" : "Triangle", "svg-data" : "<?xml version=\"1.0\" encoding=\"utf-8\"?> <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) --> <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"63.781px\" height=\"85.042px\" ... bunch of data elided here ... </svg>" }
This is somewhat acceptable but then I may need to de-escape (is that a word?) or decode on the client side once the json is passed back down from the server.
I'm curious if anyone else is doing this (I couldn't find any examples on google or stack overflow) and/or if there is any advice on the best way to do this (or a better way to do it).
Personally I haven't stored files in MongoDB yet, but according to mongodb.org it's quite efficient to store files in the database. Storing files in the database gives you the following advantages:
Because the files are chunked, you can fetch only part of a file. Useful for objects such as video, not so much for SVG.
All of your files are replicated together with your database, so you don't have to set up a separate replication system just for your files.
Now, the thing that seems to be holding you back is escaping the data. However, you only have to escape the SVG data if you manually type statements into the MongoDB shell. If you're using a driver to interact with the database, the driver will take care of escaping special characters in the data. When you read out the data in your code, the driver will also unescape the data for you.
An example to demonstrate, in the MongoDB shell:
var myObject = { "myKey": "Data with \"special\" characters." }
print(myObject.myKey)
In the first line I have to escape the quotes, because I manually type the statement. The MongoDB drivers will do this for you if you interact with the database from code.
The print() statement automatically unescapes the data, so the output will be:
Data with "special" characters.
Database drivers will also unescape strings automatically. If you send a JSON object to the client's browser and read out the values with JavaScript, the browser will also unescape the data.
When you manually prepare the data for insertion, you will have to escape special characters, there's no way around it. But as soon as you interact with the database from code, the database drivers will take care of this and you won't have to worry about it.