I am wondering if there is a way to make an image grayscale/b&w client side using javascript when the files are hosted on, say, AWS s3 or something. I have found this nice little script:
http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html
But when you try to apply this to images that are not hosted on the same domain, you get a
Security Error because you're performing cross-site operations. The exact error (from Chrome) is:
Uncaught Error: SECURITY_ERR: DOM Exception 18
In particular I was hoping there was a way I could download the image into a byte array and then modify it pixel-by-pixel, similar to how the aforementioned script works.
Note: I am not interested in creating separate images on the server side, as I'm dealing with tens of thousands of images and would like this feature to work on the fly.
This seems to be a chrome thing: http://code.google.com/p/chromium/issues/detail?id=49150
Try uploading your test HTML to a host and see if the problem stop
To load canvas images across domains, you might want to look at that: http://www.maxnov.com/getimagedata/
Related
I am creating an application that is transmitting images but the way basic javascript works the images can potentially be downloaded straight from the console in JS. I wanted to know if there is a solution for transmitting images that can't be downloaded from the console. I have seen topics about encrypted media extensions that are used by such as netflix. Is this a solution for what I have described? If so how do you use it with a library such as React?
I don't know if it's appropriate to answer this way, but there is not a true way of preventing images from being downloaded from the browser. For the user to see an image served by your website, it has to be loaded into the browser's memory. While there are tricks to prevent a simple right-click and "Save," your question is asking if it's possible to prevent transmitted images from being saved via console (or in general, it seems). The answer to that is "no", since its presence in memory opens it up to all manner of copying it. Could be a simple screenshot or getting it from the dev tools sources tab or via console script.
I have a portfolio on Cargo Collective .
I've been trying to implement a JS-driven dynamic header that uses canvas.
EXAMPLE HERE
I am drawing a PNG image on the canvas and capturing pixel information with getImageData().
Everything works fine when I test it locally, but once on Cargo I get the dreaded tainted canvas error:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
This stems from the fact that on the Cargo CMS images are hosted on their own servers on addresses such as: media.cargocollective.com/1/7/245266/headerimg/FlakeSixBlack.png
The only obvious solution I see to this is to buy some web space just to host this single image that I use programmatically. This sounds a bit stupid and partially defeats the purpose of relying on a third-party CMS.
Is there any other way to work around this?
If there isn't, how would I go about managing the DNS A records for two differents hosts?
My home page address http://flakesix.com would have to point to the Cargo Collective servers, while the image would have to be retrieved from another server (GoDaddy for example, which is where I got the domain name from).
I'm a little lost.
Any help appreciated.
If you already know what your image is, why not try and embed a base 64 conversion of it within your script ?
Here is some documentation/tool coming to Data Urls :
http://dataurl.net/#about
I recently started building a bookmarklet that displays the EXIF data of any image on a website. I chose to use Nihilogic's binary.js and exif.js libraries. For images hosted on the same domain as the parent page, the script works wonderfully. But because it uses XHR to read the binary data of images, and because XHR is restricted to same-origin requests, I can't access the binary data of any cross-site-hosted images.
Is there a way to load the binary data of an image locally (or at least without using XHR) that preserves EXIF data?
I've explored a few other directions, but I fear I don't understand them well enough to determine if there's a solution:
JSONP - I'm assuming there's no way to get binary data into one of these things.
canvas tags - these seem to produce very different base64 encodings than what PHP does, and I suspect that the EXIF data no longer exists in the new encoding.
Javascript is allowed to do special operations (like on the canvas) with same-origin images and cors-enabled images because the browser can safely assume that those would be OK to upload to the server in the first place. But then it gets complicated...
I can't access the binary data of any cross-site-hosted images.
Yes, generally it is very important that you can't. More to the point, you can't do what you want with a bookmarklet.
You can't do this with a canvas because the cors rules here are strict (for good reasons!)
In short the reasoning in general is pretty much exactly the same. Browsers are in a unique security position: A random page on the internet can show you things that are private to you, such as the hypothetical image, C:\MyPhotos\privateImage1.jpg, assuming it could guess that file path.
But that webpage is most certainly not allowed to do anything with that file other than show it to you. It can't read the binary information (EXIF information or pixel information). JavaScript is not allowed to know what that image looks like or nearly any data associated with it.
If it was able to figure that out, a random webpage would be able to try a bunch of file paths and maybe come across an image on your hard drive, and then upload the binary data of that image to a server, in effect stealing your private image.
A browser extension would be far more suited to this task than a (JavaScript) bookmarklet because of this.
Purely from the client? I doubt it. How about XHR'ing a local PHP script that runs something like exif_imagetype()? This function works on remote as well as images.
If I try to get image data from a canvas that has an image drawn to it, I get a security error. I decided to make a small demonstration of the error so anybody with an answer wouldn't have to look through all of my other code and could still see the error themselves. Then, when I uploaded the demonstration, there wasn't an error. I still get this error with the local files on my computer. Why does it work online when it doesn't work locally? Is there any way to fix this problem? The demonstration can be found here.
Images with an origin of file:/// are always considered unclean. I outlined the reasons a little while ago here. Essentially, if the rules were not that way, a javascript app could do a (very) rudimentary scan of your harddrive and try to find images and upload them without your consent.
Some browsers like chrome have flags that allow you to ignore that security rule for dev testing. I think the flag for Chrome is --disable-web-security
Is it possible to dynamically create and modify images on a per pixel level in JavaScript (on client side)? Or has this to be done with server based languaged, such as PHP?
My use case is as follows:
The user opens webpage and loads locally stored image
A preview of the image is displayed
The user can modify the image with a set of sliders (pixel level operations)
In the end he can download the image to his local HDD
When searching in the web I just found posts about using IE's filtering method, but didn't find anything about image editing functions in JavaScript.
Some browsers support the canvas:
http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas
This has to be done on the server side. One thing you might look at doing is allowing all the editing to go on client side, and then in the end POST the final image (via AJAX) to the server to allow it to return it to you as the correct MIME type, and correctly packed.
You may want to check out Processing.js. John Resig of jQuery fame wrote it. It supports pixel processing, unfortunately only Firefox 3 can handle it sufficiently.
Also look at data URIs (though IE versions below 8 don't support them, unfortunately!)
You can imagine a set of JS tools that will allow the user to define what kind of transformation he wants to do, but the final work of transformation MUST be done on a server side. JS on the client side is unable to create a file, for security reason.
Try Allicorn's Image Retargetter - it sounds like that's what you're looking for.
Local image manipulation in JavaScript should be possible - have a look at Defender of the Favicon. ;-) The question is how to get the original image from the file system into your page (I don't know of any other way than doing a HTTP upload to the server first).