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
Related
I am trying to create routes with vanilla javascript but every time I type a URL in the address bar I get an error saying, 'Cannot GET /about'. I am requesting a link to a tutorial or an answer to this kind of problem since it is my first time doing it with vanilla javascript and I have no clue.
Taking "Vanilla JavaScript" to mean "JavaScript, running in the browser, without the use of third-party libraries":
What you want is not (reasonably) possible.
When you type a URL into the address bar, the browser makes an HTTP request to that URL, and the HTTP server for the origin of the URL (i.e. the scheme + hostname + port) is responsible for delivering something (typically a webpage) back to the client.
You can't substitute client-side JavaScript for that initial request to the HTTP server.
There is an edge case. I think a progressive web app can use a service worker to intercept the request and generate a response internally. This is no good for handling the initial request though since the PWA wouldn't be installed at the time.
Generally, when you are writing a single page application you will need two parts for your URL handling.
The first part is the History API. This allows you to write JavaScript which tells the browser:
In response to the click the user just performed, I am going to update the DOM. If you were to visit this URL then you would get the same result as the changes I am making to the DOM, so go ahead and update the address bar to represent that.
It also lets you hook into the browser's back navigation so you can undo those changes if the user click's back.
The second part is where you make sure that the server really does deliver the same content for that other URL.
There are three strategies for achieving this:
Have the server return a more-or-less empty HTML document that checks the URL as it loads and then populates itself entirely with JavaScript. This is a poor approach which might as well just use hash bangs.
Generate all the HTML documents in advance. This is a strategy employed by Gatsby and Next.js. This is very efficient, but doesn't work for frequently updated content.
Generate the HTML documents on demand with server side code. Next.js can do this too.
You can do this when you write vanilla JavaScript (kinda), but it takes a lot of work since you need to write all the code to run on Node.js (where you might not count it as vanilla any more) to generate the HTML documents. I strongly recommend using a framework.
I am trying to create an input form that allows for multiple files to be uploaded to my server. The way I currently have the system set up is shown in this diagram:
Essentially:
The website is running locally on each client's machine. The website makes XMLHttpRequests to the node.js webhost. If the request requires data from the Teradata database, it will in turn make a request to a local server though the node module http. The local server will then send back the data requested, then the webhost will pass that data to the client website.
The issue that am currently running into is when trying to make a POST XMLHttpRequest to the Webhost from the Website. When I do a small amount of data, it works without issue. But when I try to pass a larger amount of data such as the binary of an image in string form, it will either end the connection or somehow lose the end of the request message, I don't really know how to tell which is going on. Since I want to be able to push the image from the Website all the way to the Local Server and insert it into the database, I need to find out how to make sure I get all of it passed to the webhost correctly. I ran into this problem going the other direction, from the Local Server to the Website, but I fixed that by "chunking" the data and sending it in smaller packages. I can't seem to find a way to do that with XMLHttpRequests.
A few things to note: I cannot change the type of database, I cannot change the overall structure of the network.
If anyone has any insights in either how to troubleshoot this or suggestions for methods other than XMLHttpRequest for being able to send larger amounts of data, I would be much appreciative.
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.
I had a discussion with my colleague about Flash security. We're in the phase of planning some things for our web project that is using Flash plugin to display content. We need to dynamically pull settings for the Flash application from the server, using JSON.
Proposal that I offered was that we should save an extra HTTP request to pull the data file after the plugin is loaded and embed the JSON directly in the page containing the Flash plugin. Flash would fire a Javascript function that'd return the deserialized JSON data to it.
My colleague opposed this proposal with significant "security concerns".
I believe that there's literally zero difference between these two approaches besides the fact that his approach requires additional HTTP request. All of this is client/server and client should never be trusted. If I want to change the data that is in the JSON query, I can do that in both cases. File pull is little more difficult to hack though, but possible with custom HTTP proxy.
What are your thoughts?
There is no difference. Both can be fabricated.
if you really care that much about delivering original settings to the .swf:
don't use http - httpFox is a brilliant plugin - use a server that supports RTMP/RTMPE and NetConnection.call() to retrieve the data.
create an algorithm for validating original json so that your app won't work if the config doesn't pass the test.
after the config is loaded your swf might check the values with the server (not all at a time) and throw an error if something goes wrong
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.