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).
Related
I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png
SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.
i'm a beginner in Javascript so please bear with me.
Basically I'm making a sandbox drawing facility for a website using Javascript. And this is done using the canvas. What I need to do is to be able to resize the canvas dynamically but at the same time keep everything on the canvas to scale.
I don't think this question has been asked before. It seems trivial but I currently have all my objects on the canvas defined in absolute coordinates. I also have mouse events to use to draw things. And when I want to enlarge the canvas (by doubling the size say). All the objects inside won't be enlarged properly to scale and the mouse coordinate system would be messed up too.
Only solution i can think of is add a scale factor to ALL my drawing parts, but this is very tricky with a lot of code. Is there a better way?
If you don't mind jaggies on your double-sized canvas drawings then you can simply use CSS to double-size your canvas. Then divide every incoming mouseEvent coordinate by 2.
If you don't want jaggies on your double-sized canvas then:
Double-size the canvas element: canvas.width*=2 and canvas.height*=2 This automatically erases all canvas content.
Scale up the canvas: context.scale(2,2)
Redraw all your drawing parts using the unchanged original coordinates. A happy note: you do not have to scale any of your drawing coordinates -- context.scale automatically does that for you.
Divide every incoming mouseEvent coordinate by 2.
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.
I am attempting to use an html canvas element to draw each character available in a font file to a canvas. To make this question as simple as possible, pretend only one character is drawn to a canvas. From there, I want to use Javascript to analyze the canvas and create triangle regions of the canvas that make up the entire character. The reason I need it in triangles is so that the data can later be sent to WebGL so text can be rendered and data will not be lost be scaling the text size up or down.
I am looking for some sort of algorithm to accomplish this or at least some knowledge to get me going in the right direction. If you believe I should use a different approach please tell me why, but I figured this would be the best to provide a way to modify text in many ways as well as make it possible to create 3d block text.
Here's an article on how to draw resolution independent curves with shaders
http://research.microsoft.com/en-us/um/people/cloop/loopblinn05.pdf
My understanding is instead of breaking the shapes into triangles you break them into quads with enough info sorted in the vertices to draw a portion of the curve inside each quad. In other words, as the shader draws each quad there's a formula that for each pixel can compute if that pixel is inside the curve or outside the curve.
I suggest you to start with the keyword Polygon Triangulation.
Using this methods, you can split n-Polygons into triangles like this:
These methods may only apply to figures with real (and not rounded) edges.
So, you are trying to convert a raster image into vector data?
When zoomed in, that will result in very jagged looking geometry.
Since each pixel is being treated as a square edged part of the geometry.
Couldn't you get your hands on the original vector (bezier curve) geometry for each glyph you are drawing?
Transforming that into triangle strips and fans would look smoother.
I would like to have a repeated pattern of squares (a little like a blueprint) as a background to the entire SVG element. I am using Raphael. How can I accomplish this?
I want to do this with SVG rather than images as I pan / zoom the SVG using SetViewBox and I would like the background to scale appropriately too.
One option is to render those squares the usual way, via paper.rect(). Might be expensive, though, and would take some maintenance if the canvas can grow in size.
The other option is to do a patterned fill, paper.rect(0,0,100,100).attr({fill: "url(images/pattern.png)"}); (see this tutorial), which should automatically repeat the image it is given. I haven't done that myself, though, so I'm not really sure how the pattern is scaled when you do SetViewBox().