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/
Related
Is it possible to get the color (rgb-value and transparency) of a point (x/y-coordinate) from the canvas? Example: I draw some figures and text on a canvas and later I want to get the color of a point at a specific coordinate.
The solution should be independent whether the canvas is visible on screen or not. And it should work independently from the operating system.
I didn't found any solution on the web. That's why I assume that this is not possible. Am I right?
The canvas isn't very pixel-based, and provides no API for doing this.
But if you've got the tkimg package installed, you can use that to do a screengrab of the canvas and then fetch the pixel value out of that.
package require Img
# Get the data into an image
set screengrab [image create photo -format window -data $theCanvas]
# Read the pixel data out of the grabbed image
set pixeldata [$screengrab get $x $y]
# Get rid of the grabbed data once you're done
image delete $screengrab
Note that the coordinates concerned will be viewport coordinates, not canvas internal coordinates: if you've scrolled the canvas, you'll have to offset as necessary.
You are correct, tk does not provide any way to get the color of a specific pixel on a canvas.
so what I want to achieve is drawing a rectangle with either a color/fillRect or with clearRect and then copy it to the other canvas layer under the one I was drawing on. Also I want to set a background to this layer with opacity.
What I've tried is setting background with fillStyle and fillRect and it went fine. Also I could draw the rectangle with fillRect on the upper canvas which had no background and then copy the rectangle to the other one with drawImage.
Problem was when I tried to create a rectangle with clearRect and copy it. As I noticed I can only clearRect with another rectangle. But then I have to set a background to the upper canvas, which is ok, but when I copy it to the other one it gets darker and darker every time (well of course..)
So how is this possible?
When you work with alpha channel you will as you already noticed accumulate alpha channel values as long as alpha < 255. The only way to "reset" this is to start fresh so-to-speak.
Here are a couple of options to get around this -
Option 1
Don't copy anything from the draft canvas to the main canvas but store all points and shapes into a 2-dimensional array or an array consisting of the shape objects with its points, color, line width and so forth.
When you need to update the main canvas, clear both canvases and then re-render all the shapes to the main one.
Option 2
If all shapes on the main canvas is suppose to have the same opacity then use a third off-screen canvas. Draw everything to this canvas non-transparent (this last is important).
When updating main canvas clear it, set globalAlpha on it and then draw the off-screen canvas to it.
So we'll probably need some example code, because I'm not 100% sure what your trying to do... your using 2 canvas objects, drawing on the top canvas, and copying that to the bottom canvas... something like?:
ctx2.drawImage(canvas1,0,0);
then your clearing the top canvas:
ctx1.clearRect(0,0,canvas1.width,canvas1.height);
and doing your draw routine again? are you trying to get some sort of trail effect or something?
I want to load the image dynamically in Flash actionscript, like this :
When the user select the image it should contain inside the frame instead of black plane box. I am thinking If I can apply that image as background image for that black plane box (which I draw separately inside the frame) that would be great. Because over here the issue is the image should look like 3D inside the frame, so maybe the background or texture method will solve this problem. Please friends give me suggestion...
Thanks.
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.
I have been searching - am thinking what I want to do is not possible but thought I would check.
I have a few canvasses on an HTML page as follows: (these are IDs below)
canvasMain - this is going to display
a large version of an image
canvasThumbnail1 - this is going to
display a thumbnail image
canvasThumbnail2 - same as
above...etc
I have it working where I paint the canvasMain with the contents of the thumbnail. The problem is since the canvas is immediate it is copying the pixels as they are over to the canvasMain from canvasThumbnail. This is resulting in an enlarged pixelated image.
What I want to do is click on one of the canvasThumbnails and be able to grab the Image.src property as a string and then pull that into canvasMain instead of actually copying the pixels over from one canvas to another. Essentially just grab the address (local or say on Flickr) from where I can pull in the image. Pulling an image in to a canvas seems to scale it nicely.
From what I have seen I do not think that Image.src value is accessible through the 2d context. I enumerated through its properties and have only found nested objects or native code returns.
I figured that if I clicked on the canvasThumbnail, and then used (this) to get a reference to that canvas element and then grab the 2dcontext of that canvas I may be able to use a property of that context to get a string that represents the value of the Image.src.
Any ideas?
Thanks
Somehow you painted the image onto canvasThumbnail1, presumably from a (high resolution) Image element.
The canvasThumbnail1, or any canvas for that matter, has no memory on things painted on it. So if you paint a large Image onto a tiny canvasThumbnail, the high-resolution data does not exist on that tiny canvas. To get it you must use the original image again, or else you must paint to a larger canvas from the start.
In other words, instead of painting the thumbnail onto the main, you need to repaint Image element (that you used to make the thumbnail) onto the main.