I am using javascript to read and manipulate pixel data in an image loaded onto a canvas. The problem is that whenever I call the .getImageData() function, I get a security error in my browser relating to having a tainted canvas. Setting the crossOrigin to "anonymous" and "use-credentials" dont work. Neither does using canvas.toDataURL. I have tried converting my image to bit64, and it didnt seem to work either (maybe I implemented it wrong). Is there any alternative to using canvas to read and manipulate pixel data in an image?
Related
When I load SVGs via fabric.loadSVGFromString(svg), the Fabric Canvas gets stuck and ultimately the browser freezes. However, I don't observe any problems when I use fabric.Image.fromURL(base64Svg). However, I can't utilize base64 converted images since the canvas.toSVG() function returns an image, which I can't use for image conversion. (In my backend, I use an SVG to JPEG converter.)
Is there a way to resolve this problem? Your assistance is much appreciated.
I'm wondering if there's a way to convert images to imagedata and vice versa without drawing to canvas.
I know the methods getImageData() and toDataURL() can be used to copy the canvas but what if I'd prefer to take an imc.src path and convert that directly to imagedata. Or convert imagedata directly to a DataURL without passing it to canvas.
I think the answer to this question is no. If you check out the docs for ImageData, you'll see that it's tied quite directly to the canvas element and all it's properties are read-only. In addition, if you pop into the console and try new ImageData, you'll see that it's not allowed for you to construct one from scratch yourself, and that the function contents are native code.
If someone finds a way to do this, I'd be very impressed -- you never know what you don't know. But since the spec specifically says it shouldn't be possible and clearly efforts have been made to prevent it from happening, I'd say it's probably not a good bet either way.
Perhaps there's another workaround for the issue you are facing. If you re-word your question to include a more broad view of your problem, some of us might be able to suggest possible alternate solutions, as you are starting to see in the first comment.
I'm trying to transform a canvas on html image.
The canvas is display without any problem, in $('#image1') there are some data, but it's not display ? What i have forget ?
Here is a jsfidle with the code : http://jsfiddle.net/mcbjam/tZGcq/
Here is the call i need to perform.
$('#image1').attr('src', image.src);
You're drawing an image from another domain. When you do this, the canvas becomes tainted, and you can't get at the data any more because that might reveal data from that other domain that you normally wouldn't be able to access.
You can fix this by copying the image file to your own domain and then using a relative URL to access it.
Additionally, you'll probably want to call convertCanvasToImage from inside the img.onload callback, but that's not your primary problem.
Would anyone be able to tell me if there is a way to apply a color halftone effect to an image using JavaScript and without using WebGL. I need to create it so it can be used across multiple devices and browsers. I have found this but its using WebGL: http://evanw.github.com/webgl-filter/
Would I be able to use three.js or processing.js to achieve it?
Any help would be very appreciated.
Create yourself a canvas element and put the image inside (see link from #Diodeus).
Get the image data from the canvas - now you can iterate over all pixels.
Apply the halftone filter on the image data. see: Algorithm to make halftone images?
Update image data
BTW: I don't recomment to do this on the client machine. Image Processing requires some processing power which may not be available on the client (e.g. Smartphone). Better do it ONCE on the server with e.g. ImageMagick.
I'm searching for a good method to upload a canvas element from Firefox to a webserver or database to have the ability to reload it later.
My ideas:
1. my first idea was to use getImageData() and save the canvas as an ImageData object to the database, but this might not a good solution because these objets can get quite large.
2. second idea is to use a Flash/Javascript method to upload the canvas as an PNG to the webserver.
Do you have any comments on these methods or maybe have another good solution?
Canvas elements have a toDataURL function that serializes the image on the canvas as a PNG, encoded into a data URL. You could either post the image with a form (by setting a hidden input element's value to the data URL) or in the background using AJAX.
You should be aware that toDataURL (or any other method of getting the pixel data) will throw a security exception if the canvas is not "origin-clean". For example, if you ever call drawImage with an image from a different domain, you can no longer use the toDataURL or getImageData functions.
I'm not too sure I would be worried about size unless images are typically > 10 mb in size. Is that really an issue?
If not, using getImageData() would be the most practical and simplest method IMO.