How can I add text on an Image using html5 canvas? - html

I want to add text on an image using HTML5. How can this be done?

You can load the image into a canvas (using drawImage()), then draw text on the canvas (using fillText()).
If you want to you can then take the image data from the canvas using toDataUrl() and post that data to the server for image persistence.
If you only need it for client side visibility you have a much simpler solution that doesn't use html5. just overlay a text over the image using absolute positioning.

Related

Can I type over an image and output as one image file?

Is there a way in HTML5 Canvas that allows me to type out a sentence into a text box and it puts that text onto a banner image and then allows me to save that image as one with text?
The reason I want to do this is that it's for a flyer builder so people without any software to edit banners can just choose a banner template that I've made without any text and then type in there own and then output the banner to the flyer as one image.
I know that there are things Canvas can do like typing onto images but I want to know if its possible to output the image to a set destination.
Thanks in advance.
I understand that your text - that the client can type - is drawn in the canvas?
If so - there is a way to save your entire canvas as an image.
you can use a div as a preview image of the drawing, and generate it like this:
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
Here's a fiddle http://jsfiddle.net/GnH8E/
The first image is the canvas - the next is the image prewiew.

IText Object above Overlay Image

In my canvas I have an overlay image using setOverlayImage method from Fabric.js canvas library.
I have the need to place an IText object above my already set overlay image, but the IText object always appear behind my overlay image.
Is there some way to accomplish that using Fabric.js?
That's not possible. "OverlayImage" is an overlay over all other objects.
Why you need that?
Can you use "BackgroundImage" instead?

phonegap put gif on image loading till it is loaded

I have a phonegap application that loads external images.
sample img code:
<img src="http://example.com/hello.jpg">
Will use this code to put the gif with some css
<img src="loading.gif">
I want to show a loading gif on top of the image till the image has been loaded and hide the loading gif afterwards.
Want to know how to detect if image is ready and hide the gif.
Thanks
There are a few ways to do that. Off the top of my head and in order I'd try them:
Use phonegap's File API to download the image, and display it only once you've got it.
Use an XHR to download the image, and once you get the whole thing send it to the image via a data: URI.
Set your "loading.gif" image to a lower z-order than the foreign image, with the same left/top/height/width.
Use 'loading.gif' as a background.

Getting a reference to image loaded inside an HTML 5 Canvas

I am loading an image into an HTML 5 Canvas using drawImage method. How do I get a reference to that image later (maybe on some mouse-clicked event) so that I can do a transformation to the image (like rotation)?
Save a reference to the Image object you used to paint to the canvas.
Then,
Delete the canvas (clearRect)
Make the transformations using the canvas context
Draw the Image again
Go to 1 when you need to refresh the canvas
You can't. Once it's drawn on the canvas it's just pixels. No reference to the original source is retained by the canvas. If you want to maintain state information you have to do that yourself. Alternatively use SVG, that retains an internal DOM.

Draw on the image (jpg or png) using canvas and save the drawing with the image

I tried to draw on the image using canvas. Yes, of-course i did. But i need to merge the canvas drawing with the image instantly.
i.e My concept is, i have one image (#a) and i like to mark some places on the image (circle, rectangle, etc...), so i have just pick the canvas technique. (if any other technique is available please suggest me.)
So, after the canvas drawing, i want to merge the canvas image with my actual image (#a). Then, i'll get the marked image.
What i did before?.
I was set the background as my actual image(#a) to the canvas tag. (i.e canvas tag with some background image). I have done the drawing. Then, i have convert the canvas image as dataURI, then i will merge the actual image (#a) with canvas drawing using Linux command (imageMagic).
Can you tell me any other way, to draw directly on the image and save the drawing with image instantly.?
Thanks in advance.
Don't set the background of the canvas.
Instead, you want to use the drawImage() function of the canvas context to literally paint the image onto the canvas. Then do all your drawing operations.
Then you can save the image correctly. I'd also suggest looking in to Canvas2Image for that.
http://www.nihilogic.dk/labs/canvas2image/