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.
Related
I have question related with coloring image (mask) in Javascript. I am looking for technologies stack, libraries, ideas which help mi with my issue. I plan to write JS app which allow user to color part of image, I mean that if you have fence image, you could color the wood. I will have image and mask (transparent image with black places where color should be placed). Application should give possibility to change saturation of placed color on image (te texture should be more or less visible depend on color category) and adding additional texture on mask where color will be placed for e.g. changin wood grain.
Can you tell me which approach will be better? Should I use third-party library (e.g. WebGL like pixi or three js) or simply canvas and iterating though pixels and manipulate them, e.g. making average color by taking R and G and B value of image pixel and destination color (but I see problems with putting textures and saturation). Or maybe you will have some other ideas?
I don't know that I described problem clearly. If you have some questions, please ask and I answer it.
Thanks!
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 am looking to get the actual displayed color of an area of the screen using Javascript.
I have a system that allows people to restyle their content and they can use RGBA colors, what this means is that while I can very simply test what the background color of an article is (for example) that may not be its actual color because it may be slightly or fully transparent and thus the layer underneath may be showing through...
I have seen various questions on here that deal with getting pixel colors from an image using Javascript, so I am wondering if canvas could be used to achieve this in some way...
What I want is to hide the text in an article, create a (maybe canvas) 'screenshot' of what the article background looks like empty, and then iterate over the pixels in there to get an average color value.
Anyone any ideas on how to do that?
You need to get a screenshot of the page using canvas, which is not trivial:
Can you take a "screenshot" of the page using Canvas?
And then getting the colour would be trivial once you have the screenshot.
I work on a little project where i have to create plane with mouse detection.
For moment i just make some test on a cube from a simple exemple found on the web.
The detection is good and accurate but the container has to be scaled when mouse wheel in order to make zoom.
(i also have to make a zoom on some images, the purpose is to superimpose images with some 3D forms in order to create an accurate detection on my images, these images are scaled with css transform so i guess the simple way is to do the same with the canvas container)
The problem come after scalling this canvas container (using css transform), the raycasting doesnt remain exact and i dont really know how to fix it, i tried to change some value but in a random way.
I guess there is something to do with the scale factor applied on the container but i dont understand which variable i have to modify.
I will try to scale the canvas using three.js directly and following the scale that i apply on my images but i dont know if that would be easier.
Here is my test : http://pixelreseller.com/src_pixelreseller/projets/three-test/
You can see code by the code source but if you prefer that i copy/paste code here, let me know.
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.