How to make image fit in the edge? html5 canvas javascript - javascript

http://i.stack.imgur.com/4oAYt.png
This is original when not insert image. it has blank image
http://i.stack.imgur.com/aupwr.png
i want to know how to make the image curve fit the edge (in red circle the image is fit in edge).
what the framework can do this?
raphaeljs
fabricjs
kineticjs
Thank everyone for help me. sorry for bad english.
Best Regard.

Around a square corner
You can use shearing transforms to give the illusion that a rectangular image is being shaped around corners. Shearing transforms are how you would put your rectangular logo image on a rectangular “3d” box. For “shearing” effects you can use any of the good libraries you mention…or even just use canvas itself. However , shearing effects give you sharp creased edge transforms rather than curved transforms. Here’s an example: http://www.createjs.com/#!/EaselJS/demos/transform
Around a curved corner
But for truly curved transforms, you will need webGL or an image processing library that does perspective transforms.
Check out the server based ImageMagick tool and in particular look at the 3d Boxes, Perspective Layering section on this page: http://www.imagemagick.org/Usage/distorts/#methods
Quoting the imagemagick.org page:
This image was created by taking a [rectangular] image of a anime
video box cover, splitting up that cover into 3 segments ('cover',
'spine', and 'back'), distorting each separately, into layered images.
The image was then finished by the addition of highlights and shading
effects (using HardLight image composition), and the addition of
border and semi-transparent shadow effects (using CopyOpacity).
You can also do this in Photoshop--probably much easier ;)
Bring your logo image and your phone case into Photoshop on separate layers.
Use “Free Transform” to rotate your image to the same angle as the phone case.
Use “Warp” in “Custom” mode to wrap the image around the phone case (the grid helps guide you).
There’s not much lighting in your phone case, but use “Blending” in the overlay mode to have your transformed image take on the highlights of the phone case.

Related

Image registration (aligning one image to match another)

Currently I have an image that needs to be manipulated so it matches the same scale, position, and rotation as a template.
The grey rectangle with a circle in the middle is the template.
The orange rectangle and circle represents the user's input. It needs to be rotated, scaled and aligned to it matches the grey one. I'm currently stumped on how to proceed. I've no code other than the following.
function align_image()
{
// clever transform alignment code here
}
Bad dog, no biscuit!
The process at of aligning the images would normally be done manual input and judged by eye. I'm hoping to automate this step and align the image to its respective size and position but leaving the comfort and safety of Photoshop DOM I'm not sure how to proceed or even if this is a trivial matter or one left best alone. The project is web based currently using javascript and three.js
So if anyone can give me some pointers I'd appreciated it.
I don't code javascript so I can only talk about the algorithm. Generally best tool for registration is to use feature matching methods (using sift, surf,...) but your image is not the kind that have strong features. Now if you're always dealing with rectangles and circles in your images, find the "edges" of the rectangle with Hough Transform, compute the angle of those edges (lines) then rotate the image with that angle in the opposite direction.
Then with the help of Hough Circle Detector, find the center of the circles in the middle of the images, calculate the distance between them, and move the target rectangle to the source's circle position. After the movement by comparing the radius of the circles, you can resize the target image to make it like the source rectangle.
All of these are conveniently doable with Opencv.

Javascript stretch image according to a map?

I'm trying to figure out if it is possible to stretch in image in Javascript so different parts of the image expand more quickly than others. I was thinking along the lines of an black/white map where black does not stretch at all, white stretches the most and the shades of grey in between stretch proportionately. Is this at all possible? I;m hoping to make a picture look as if its losing or gaining weight.
Thanks!
You could use the HTML5 canvas feature along Java-script to do image manipulation.
Altogh it will be processor intensive, mainly if you want to do animation, you can do it.
Some tutorial for the canvas element of HTML5 with Java-script, probably you are interested more on the drawImage(image,x,y) method.
http://www.w3schools.com/html/html5_canvas.asp
And references
http://www.w3schools.com/tags/ref_canvas.asp
You could then get draw the parts you want scaled, but giving it near non noticeable artifacts effects like you want is really difficult.

Creating an X-ray vision effect on an image HTML5 [duplicate]

If I change the cursor of a page into a 'flashlight' (say, a circle), and I want to reveal an image only when passing the light (the circle) over it, what would be the best way to go about this? Using css clip? But then it can only do rectangles, so I'd have to use canvas? Perhaps there's an easy way to intersect the two images?
You can do this with a canvas easily.
Here's an example:
http://jsfiddle.net/gfZ5C/
On every mouse move, we clear the canvas, redraw the image, make a clipping region that is a circle cut out of a rectangle, and draw black on the entire canvas (which will draw only on the clipping region)
Make sense?
There are a lot of ways to achieve this effect and similar effects. You can also make much fancier light sources with a bit of canvas sorcery. See for instance my answer here: Canvas - Fill a rectangle in all areas that are fully transparent

Html canvas free transform

I am trying to transform a non-uniformed portion of image in a canvas element to a proper rectangle (ie. Like taking a non-rectangle portion of an image in photoshop and using Distort to make it rectangle), but am having difficulty understanding Canvas Matrix Transforms.
I am not after code, just a point in the right direction, in terms of understanding how I could achieve this.
Cheers
Update 1: Incase I didn't explain well enough http://i.imgur.com/QTB6q.png
Update 2: The those boxes are an area inside a photo which was added to the canvas, essentially I am cropping and straightening a portion of the image.
In html5 canvas you can apply only affine transformations using transform or setTransform() methods, so you need to know what is the matrix applied already and using the inverse matrix to make it look like a square area, for other transformations (non-affine), it is needed some math knowledge (that I don't have), create or search for an implementation for Canvas API (which works only with affine transformations).

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