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.
Related
I have made a canvas and added different objects to it such as images, clipart and text. When I take snap of the canvas when it contains only text, using the method canvas.toDataURL(), it gives me the correct snap. But when I add an image to the canvas, it will return a blank page.
My code is as follows:
canInstance.discardActiveObject();
drawCanvas.loadFromJSON(json,function(){
var img = drawCanvas.toDataURL("png");
$("#previewPopUp").append("<img src='"+ img +"'/>");
});
I am using fabricjs. Can anybody tell how to take a snap of a canvas when it contains a image?
The likeliest reason why it doesn't work is because you are loading the image from a different domain than where your HTML is hosted. As soon as you do that, the canvas gets "tainted by cross-origin data" and certain functions which allow to read the canvas content become unavailable.
This is a security feature to prevent web developers from accessing images only the user is allowed to access.
As a workaround, copy the image to the same domain or, when you control the domain the image is loaded from, whitelist the domain with your HTML by enabling Cross-Origin Resource Sharing in the settings of the webserver.
Suppose my image is not upright (I open it in window browser and the image it not upright), but when I upload it to some server (such as gmail, stackoverflow). The image becomes upright.
I asked this question is that I am writing a preview logic with html5 and javascript. The image that I talk about show what exactly I see in window browser. Just wondering if the server did some trick to adjust the orientation?
Image shown in windows:
Image that directly upload to stack overflow:
I'm guessing you are talking about an image you generate or manipulate client-side using a canvas element that is then rendered back into an img tag. Correct?
Server-side, the orientation can be determined by looking at the image's EXIF orientation flag. It IS possible to examine this flag client-side using a library like jQuery fileExif.
If you use a script like ImageInfo you can fetch EXIF data (if the image has it). If it hasn't you practically can't know why it happened. Might be some "fake" displaying on the computer you are working on. Some image managers might keep duplicates of an originally rotated image.
The EXIF property Orientation might tell you if the image is changed, based on it's dimensions compared to it's orientation.
On Server Side:
You can use a tool like Graphics Magic to auto-orient the image correctly: http://www.graphicsmagick.org/GraphicsMagick.html
gm.exe -convert -auto-orient MyImage.jpg MyImageCorrectOrientation.jpg
I am trying to add markup to an image. The user will be able to add text, drawings and images. I am guessing it is easiest to do this with javascript on the front end. My question is, what is the easiest way to save the final image. Can the image be saved with javascript as well. Do I need to serialize the image and save it on the back end? Are there any good libraries that help with these kinds of problems, they seem pretty common.
I know this is open ended but any help on manipulating images with javascript and saving them to the the backend, java in this case, would be very helpful.
You can load the image in HTML5 canvas and draw on top of it using javascript.
When the user is finished you can use the toDataURL() method of the canvas to get a bit64 encoded version of the image which you can send or save as you like.
In your example you could send the 64bit encoded string to a webservice or api to save it.
consider this html
<canvas id="myCanvas">
</canvas>
then use this javascript to work with it:
//vanilla js, I advise to use a library like Kineticjs
//paint some things:
var can = document.getElementById("myCanvas");
var ctx = can.getContext("2d");
//after the painting is done get the image
var bit64ImageString = can.toDataURL();
if you want to save the image on the server, use an Ajax call and send the bit64ImageString to the server. From that point on you can do whatever you want with it :)
I have an small drawing application made in processing.js. I would like to save the image made using the application to a server using a php file (no problem on this).
I know the canvas element has a method to get that content, canvas.toDataURL() but I dont know how to do the same with processing.js
Any hint?
Cheers!
perhaps
var image = document.getElementsByTagName("canvas")[0].toDataURL();
So when you use saveFrame() in processing.js. The image opens in a new window and i found it hard to intercept the data. The soultion is to get the image from the canvas in javascript.
// this grabs the canvas and turns it into a base64 image
var image = document.getElementsByTagName("canvas")[0].toDataURL();
// Log the data to the canvas to check it working
console.log(image);
// then you can place the image on your web page
document.getElementById("theImage").src=image;
Then the html is easy. Just add
<img id="theImage"></img>
If you want to upload the image to a server you can acsess the data in js with.
image
Note that you can also use style display:none; and have the canvas render image for you without the canvas displaying. It also supports transparent pngs and the canvas by default is transparent
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.