I have a simple png image with building and I need to create custom areas above the image, like in this example and call in js, using the DOM. So, I can solve this problem, via div tags with position: absolute, but is this the correct way?
It is a correct way. However, you can use the same approach as in your example. They use svg object with one big .png image.
Related
I already looked at How do I convert my entire div data into image and save it into directory without using canvas?
And I used the html2canvas library and i was able to get an image, but it was not how i wanted it because I had a 3dtransfomed div inside and the final image did not keep that property.
The result using the html2canvas lib was this:
And what I wanna get is something like this (blue dots are irrelevant):
I have lets say this html code: <div id=background><div id=pig style=transform: matrix3d(1,2,4,2,34,4,5,3,54,3,4,4)><img src=whatever/></div></div> And I want to convert it to an image. I tried using the html2canvas library that they mentioned on the post i linked to at the top. But the result was the first image i posted. What I want the result to look like is the second image. So I thought it was because it did not take into account the transform3d on the pig div.
I'd recommend taking the image you get (which looks fine, but not skewed correctly) and running it through CSS transformations.
Information about CSS 3D Transforms
This demo of skewing a 3D prism with CSS should be of particular interest to you
I'm searching for Javascript (JQuery if possible) plugin that can generate an image representing the inner content of a DIV.
Example : This link shows an image containing 3 x 3 box display.
What I would like is that these boxes could contain an automatically-generated picture showing what a specific DIV's content look like.
Is there such a thing?
If you don't have too much content on the screen, this seems like a simple option
html2canvas
It is well documented
Well tested
But it will not work for all elements
It will not work with all atributes
But this is the solution if you want to take the screenshot of your page only(where you know the possible attributes and elements)
I don't think that Javascript can create an image from the scratch, but for sure is possible to make that on the server and use JS to make an AJAX call to it.
Hope this helps.
You could use "webkit to image" wkhtmltoimage: https://code.google.com/p/wkhtmltopdf/ I've used it to generate images from javascript graphs and tables etc. Any html will work. Its not purely javascript, but you could send the html div (and relevant css) to the wkhtmltoimage and get the image back via ajax.
I'm curious if it's possible (either with canvas or with CSS) to place a mask over a JPG or PNG to make some part of it transparent. Specifically, I want to define a circle over the image, and for the pixels within that circle to stay opaque, but for all the other parts of the image to become transparent.
I'm Java this is a fairly straight forward operation, but I'm not finding any analog in Javascript and am wondering if this is simply not possible.
TIA
Just check this -webkit-mask tutorial from css tricks.
CSS
.circle-mask {
-webkit-mask-box-image: url(mask.png);
}
RESULT
Related links:
CSS3 -webkit-mask property.
Using an Image as a Mask
-webkit-mask-image
You can also use the mask tag from SVG, to actually place images of circles with different gradients, do tell if this helps?
You can use SVG filters to create something like a »blend mode«. You can use i.e. Inkscape to compose these effects. If you become familiar with the syntax you can create a lot of effects. Perhaps you can post an image of the desired effect, than it should be more easy to see what can be done. There are also some js libraries to make certain effects with images.
First of all, I'm very new to javascript. I'm trying to develop a javascript function which takes an image and returns a cropped version of that image. By looking around on google I've found that I probably need to use a canvas in some way to accomplish this task. But does that mean I have to display the image on my page?
I've also looked at different javascript image processing libraries for a similar function, for example Pixastic's Crop, but I have no idea how to use it to solve my particular problem. So now I'm turning to you guys for help. Please guide me in the right direction!
Thanks!
Pixastic's Crop solution seems easy to implement and uses the canvas. It would do the job as long as you don't need to support Internet Explorer 7 or 8.
Otherwise, you can simply use CSS overflow:hidden; to do a client side cropping.
Pixastic Solution: http://www.pixastic.com/lib/docs/actions/crop/, check out the Example Code tab.
Here is a working example for Pixastic and the CSS solutions: http://jsfiddle.net/EB6P7/1/
I used the jQuery plugin for Pixastic.
--
If you don't need to save the image on the server side I recommand using the CSS solution as it doesn't rely on Javascript and achieve the same result as Pixastic.
If there's anything you don't understand, ask me as I don't know your level in HTML/CSS.
Well if your problem is only cropping and not saving the cropped image, the simplest solution I would say is to position the image using CSS inside a div and show only the cropped area.
If you want to save then I wish you need to use some library on the server side to crop and save
Maybe the CSS Clipping feature is a solution for you?
#someImage
{
clip:rect(50px 100px 130px auto);
}
Let's say you have a png and it contains all of the icons that are to be used on one page, what is the process of using JS to select and display on a certain icon in that image? I've always seen it being done, but it seems to evade me what it is, and how to do it.
It's done with CSS, not JavaScript, and it's called sprites.
http://css-tricks.com/css-sprites/
You would use CSS and if you want it to be a really painless experience use this website below.
http://www.spritebox.net/
It will take care of generating the picture and also making generating the CSS you will need to output the icons.
Sprites, but you would probably use CSS rather than Javascript.
I guess you are referring to sprite image. js or css can be used to select images.