Post large DataUri to another server with javascript - javascript

I have a string contains image dataUri. I need to post this string to ANOTHER remote server, so I use the form and iframe technique to do that.
The problem is, that when the string is too large (the image is too big) - the server doesn't accept it. That means, the string shows up 'null' on the server.
I've read a lot about this issue on SO, and all the answers relies on Bolb objects in this way or another. Unfortunately, IE9 doesn't support it.
Is there anyway to pass a (VERY) large string from the client to the server? multipart post doesn't work either, since (as I understand) it works only for files, not parameters.

Related

Should I URL encode even if im not sending to a server?

I would like to know if URL encoding is recommended in all circumstances when using URL parameters.
Currently I am using window.history.pushState to update my querystring without reloading the page so that I can use the parameters in that URL to display certain things on my page that refresh. e.g a drop down that goes to the previously selected option when the page refreshes.
I have seen some people insisting that all my parameters should be encoded and decoded, but what if the values are only used for refrence, and not sent anywhere, do I really need to encode them, and if so, why?
Encode and decode is used to prevent unwanted injection into server or application. Even if you are not sending it to the server then also it may be risky. If you think that you are just using that as parameter to show or hide fields that will not be a part of any injection harm to the server or your information then you can go without encoding.
But every professional developer would encode that even it is not sent to server.

JavaScript send&receive data cross server

I taught myself programming so my knowledge is very fragmented and now I have encountered a fragment I know nothing about. Sending and receiving Date. In addition I want to do it across domains. I know about the security policies that prohibit this but have read about some solutions. I still can't make sense of it in relation to my challenge.
What I want to do:
I want to build a plugin that sends data to my server when a function is called. The function is bound to an event listener.
this plugin contains of a little html-form and some js in the back. i want to send json or simular.
my questions:
I) how do I send data to an other server?
II) how do I receive this data? I know about parsing and dom but all I did so far is handle requested data. now this data is posted to my server-app without me knowing beforehand. the data is used to update a DB. the backend is coded in JS or python. I would prefer JS for compatability reasons.
III) how can I test the cross server connection on my local machine? especially without an active internet-connection?
I don't expect a complete guide or the code i need. just the resources and where to get the knowledge-chunks I need to build this.
Thanks a bunch in advance!
I) how do i send data to an other server?
You may use AJAX (or jQuery.ajax a more convenient way)
II) how do i receive this data? i know about parsing and dom but all i
did so far is handel requested data. now this data is posted to my
server-app without me knowing beforehand. the data is used to update a
DB. the backend is coded in JS or python. i would prefer JS for
compatability reasons.
As long as you send some data via AJAX, the browser makes a HTTP call and you could receive the data from server-side. Both JS or python would compatible with your client-side javascript and seldom do there have compatibility issue.
III) how can i test the cross server connection on my local maschine?
especially without an active internet-connection?
localhost and 127.0.0.1 is treated as different host and I usually use these to test cross server scenario. One issue of AJAX is that browser usually disallow Cross Domain calls unless you specify Access-Control-Allow-Origin headers.

How to display json file without calling it directly?

I've been poking around a great website - http://beta.rallyinteractive.com/ trying to learn something new. Website uses a lot of Ajax in it, and also some interesting javascript - without any additional libraries.
In this single javascript file a found a reference to ajax json get request. You can even easily access the the json file on this url http://beta.rallyinteractive.com/surrounding/studio/ , however I do not understand, why is this data being shown, without the "proper" path to the file.
And by proper I meant "somedomain.com/surrounding/studio/data.json"
Any ideas?
That's just the way they have their site hosting setup on the server and/or within the web application. If you request to the "/surrounding/studio/" folder then it returns the JSON response.

How can i "getImageData" from another website? SECURITY_ERR: DOM Exception 18

I'm working on an online app to manipulate images.
It works fine when doing it with local files (on the server) but as soon a I try it with another source it breaks.
The reason for this seems to be a security limitation, qoute from whatwg:
Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.
So I wonder can I get around this somehow?
The images will all come from a google API, and I really want to skip saving the images if i can.
Thanks.
Since you probably don't have access to the server(s) where the source images are being pulled from, your best bet is to proxy the files through your server.
Essentially, you send an AJAX request to your server with the URL of the image you want data from. Your server receives the request and asks for the image on your behalf. When it obtains the file, it then base64 encodes it and sends the data back to you. Since the image data is just a string, you can create an image object out of it and manipulate it via a canvas without worrying about the originating domain.
If you're willing to use jQuery, there's a great plugin that will do exactly this located here: http://www.maxnov.com/getimagedata/
I've used this particular plugin before with excellent results. I will note that you should (must) host the proxy server code on your own server. You can use the author's appspot account, but it's limited to some number of queries per day and frequently runs out. The author explains how to host the proxy code yourself here: http://www.maxnov.com/getimagedata/#using-your-own-server

Cropping a photo using only JavaScript which accepts a URL as input

Is there any way to crop a photo using client side JavaScript only?
When I tried searching for such a tool, the JavaScript part always uses DHTML to simply allow the user to select which area of an image to crop and then sends that information to a server side script (e.g. ASP, PHP) to actually perform the crop.
I realize that JavaScript can't create files or request them, however I think workarounds should be possible. As far is input, I want the JavaScript file to take in a URL of an image. This is simple and you can easily create an <image> element to display it. As far as output, I was hoping for a data URI solution.
Several solutions exist, however, when I try using them (http://jsfiddle.net/sfjsfid/skm6V/1/), I get the error:
Uncaught Error: SECURITY_ERR: DOM Exception 18
The reason this happens is because the specification states that this error must be generated when you request an image from a different domain than where the page is hosted.
Is there any other way to have a pure client side JavaScript solution of cropping images which can come from a different domain?
If I try using a data uri instead of an image from a different domain (http://jsfiddle.net/VX2z2/), it works correctly. However, to be able to use a URL to an image as the input, I would need to convert it to a data URI somehow. Using a canvas won't work because of the security issues I have already discussed. Even if I find a web service which I could use, it wouldn't work either because then I would be sending an Ajax request to an external domain, which is another security risk that is blocked by the browser.
Hosting my own version of a web service or hosting server side code is not an option.
Any other ideas? Or is the only option to accept a data uri as the input?
If you want to break the security model, you'll need to do something other than a web application -- like a Firefox extension, for example. This would give you additional privileges for making requests, even saving the image.
There's no way to work around the security model. You need server-side help to request data from a different domain and access it from JavaScript.

Categories

Resources