How could I use canvas to past one image into an other? - javascript

I would like to past one image into an other image with a transparent box.
So it's not only copy and past some image into an other. Also how could I transform the image to fit in the other image.
Example: placeit.net
How could I use Canvas, JQuery or other for that? Thanks for any examples.
UPDATE:
I didn't want to be spoon-fed some code. Only one example or documentation about transforming like placeit.net.

Yes, you can do placeit.net type effects using html canvas.
Look at compositing to draw a second image only where a first image is transparent.
Look at transformations to:
Rotate your second image into place,
Skew your second image to fit the angle of your first image.
You can do image filters (mostly from 3rd party solutions).
A good blur filter: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
You can add text to your presentation with context.fillText

Related

How do I apply context.filter only to the image on the canvas?

I am making a photo editor where you can upload an image, add filters, put on text, draw with a pencil, etc. The problem is that the filters that I want on just the image, applies to everything on the canvas. I don't want it to apply to the text and the drawn lines with a pencil. Is this even possible in vanilla JS or would I have to use a library?
This is how I it looks right now when the text color is actually set to red and I applied grayscale:
This is how I want it to look with red text and grayscale applied:
This happens with all of the other filters as well, but gray scale was the most obvious one, so I used that as an example. I did not include code as I am mainly asking if this is even possible.
Yes it's possible, just set the ctx.filter back to "none" after you've drawn the image.

Is there a way to make a circular image in HTML using Canvas or other Method?

I know that the canvas element can look like a circle using the CSS border-radius property. However, if you draw something using the canvas API, and then right-click to "Save as Image", when saved, the image is still a rectangle (as if the border-radius was not applied). Is there a way to actually save the correct image?
All image formats that I know of yield rectangles.
You could draw a circle on a canvas with the outside of the circle being transparent. That would visually look like a circle rather than a rectangle.
When css applies, it does not really transform the image except visually. So, you would need a bit more than simple css. The issue is discussed here where what you want is achieved using javascript:
Save canvas image after css applied
Capture and save an image with css effects applied
Hope this helps.

Capture what is under my Canvas as part of the Image

What I'm trying to do is include what is under my canvas object in the page as part of the image when I saved what is inside the canvas.
I have an application that creates a canvas and lets you draw with the mouse on it. This drawing functionality is in place so you could draw on a page as if they were notes, so after I can save the image or page with the "notes" I draw on it.
So far I'm able to save what is drown in the canvas but because the background is not part of the canvas I can't get to save it together. I tried experimenting with html2canvas.js but it doesn't work in my case because it takes the DOM object an redraw them into the canvas, it doesn't take just what is under the canvas to be part if the final image.
I would like to know if there is a way to do this, or somehow capture the pixels in that area and redraw them as part of the canvas when I'm creating it.
Thanks a lot in advance!
Possibly a duplicate, but I'll give you a very short answer; you can't (unless you do something like html2canvas, where it transposes the DOM onto a canvas element)
This is by design. If you could it would be a security flaw. Scripts are not allowed to create images out of arbitrary stuff on a person's screen. If you search for "html canvas security rules" you'll find more information on why this is disallowed.
Unfortunately, HTML2Canvas (or something like it) is the only option, but it's only part of the puzzle. To get the effect you want, you need to create another canvas to composite the output from HTML2Canvas and the drawing canvas. You'll need to offset the output of HTML2Canvas to the position of your drawing canvas, and then draw the imagedata from your drawing canvas on top of it. Then you can use the imagedata from the compositing canvas as your output.

Setting a transparent color in HTML5

Is it possible to set a transparent color for images loaded in HTML5?
I would be looking for something similar to the setColorKey() function available in SDL. This would be used to easily remove a background from some sprite sheets that I will be using.
There is no very straightforward way to do this, but you can use the <canvas> tag to do this.
Draw your image in the canvas, using drawImage, and then use getImageData and putImageData to perform pixel manipulation on it.
There are some examples of pixel manipulation in canvas here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
There is no built in function for this. If this doesn't need to be dynamic, then you could remove the color from the original image and make those areas transparent. Then you put the images in a div that has the background color that you just removed from the image. After that you change the background color of the div when you mouse over the image.
If that sound like the right idea and you need some starter code let me know.

Creating a Path/Imagemap from a Transparent PNG with Raphael JS

I'm working on a Raphael JS project and need to display some transparent PNGs with only the parts that are non-transparent to be clickable. Is there a way to:
Upon mouse click, pull out the alpha of the current position.
or
Generate a path which can be be used to define the clickable region (i.e. http://raphaeljs.com/australia.html)
As raphael is for vector graphics, it is the wrong tool for your problem with png. I think canvas is what you looking for. Load your image in an canvas (the canvas doesent need to be pushed in the DOM). On click check the coords and get the pixel out of the canvas.
But maybe it will be easier to convert you png to vector graphics and use raphael instead.

Categories