We Keep Coding

html2Canvas image border radius - img vs class css

I am using html2Canvas library version 0.4. In one particular case, I am trying to add border radius to an image. This works if I add this to the CSS:
img{
border-radius:50%;
}
But instead if I specify a class with same properties, and add that class to the image, then the border radius is not respected. I want this to work because not all images need the border radius.
Here is an example fiddle. Please click "Run" first, so the image is loaded.
The actual code JavaScript library is copied in the JavaScript section of the fiddle. Can someone help with where is this happening inside the JavaScript so I can fix this?

I think the problem is that when you create your image you don't specify a class, try adding this line before you append the image to your div :
img.className = "ab";

When to retrieve height for element with image in it?

In my web app, I want to display popup element which has <img> element in it. Image source is usually bigger than I need it, so it get's resized in css. And before I display it, I need to know it's outerHeight.
The popup looks something like this:
<div class="popupContainer">
<div class="popupHeader">Header</div>
<img class="popupImage" src="source" />
<div class="popupMessage">message</div>
</div>
After I append it to another element, I'v tried retrieving it's height in two ways: simply popup.outerHeight(true) and using imagesLoaded library:
imagesLoaded(popup, function () {
popup.outerHeight(true)
})
In most caes, both options return the same and expected result (like how tall the element actually is in browser). But there are times when option #1 returns height that is too small, because the image source hasn't been loaded yet, whereas option #2 returns height that is way too big, because the css hasn't been applied yet. (I think that those are the reasons). So I wanted to know, which is the best time to retrieve it's height? When the image will be loaded and element will be formatted correctly accoring to css.

You should do when the image will be loaded.

onclick png background color change

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.

Really this can be done simply, if you have strict control over what png files you use.
For example, you can make the png fully opaque with the exception of the area you want to colour.
Then you can load the image and just set the background colour of the element you are using when a colour is clicked.
Something like this:
$(".ColorOption").click(function(e){
e.preventDefault();
var color = $(this).data("color");
$("#MainImageBackground").css("background-color", color);
});
assuming you set up your colour options using the data attribute like so:
<a data-color="#F00"></a>
with your image something like:
<div id="MainImageBackground">
<img src="whatever"/>
</div>

You can solve this with Javascript, but therefore you need for every color a own image.
<script language="JavaScript" type="text/javascript">
function changePic(picColor)
{
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnYellow")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}
</script>
HTML for every color button:
<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Idea 1:
User the canvas element and look at fill methods, this is probably going to be more complex than flash.
Idea 2:
Create transparent PNG where the colourd area is the only part that is transparent.
Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position
Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.

To accept any png and fill the middle:
You can find information on the floodfill algorithm in javascript here:
http://jsfiddle.net/loktar/ZLw9m/
However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that
As #musefan pointed out if you can control the PNG's this is much easier

Is there something like data-* attributes for css?

I want to pass a value that's set in a stylesheet so it can be read by javascript/jQuery? I thought of creating an invisible element and giving it a value, but then I would have to include that element in all the pages, which is pretty hacky. Just want to know if there's an alternative to that.
I have a js resize script for images that resizes based on area instead of height or width, so I can't feed it a maxwidth or maxheight, per se. if you give it 100, it makes the area of an image = 100^2. I suppose I could set the maxWidth of the element to twice the number I want, but I'm just wondering if there's a classier way to pull it off.

As far as I know, browsers throw away attributes they don't understand, so unfortunately you can't just inject your own data-*. I think you might have to do it via a hidden element, something like below, which uses the content attribute:
# styles.css
.data {
display: none;
content: "my data variable"
}
# index.html
<span class="data"></span>
# javascript
myData = $(".data").css('content')
Update
Playing around in Chrome, it looks like you can set the 'content' of an image and it won't show up. So you could do
# styles.css
img {
content: "100"
}
Not sure how well that works cross browser though, also looking at the w3c spec, it says that 'content' has to be used with :before or :after, so not sure if you'll run into validation issues there.

Why not just use javascript to query the actual element, and read its properties that way? Then you don't rely on the CSS at all.
$('someDiv').getWidth()

How to hide img elements that do not have src attribute, until the attribute is added?

My JS code includes some images that are empty at the beginning
(without src attribute specified at all + display:none).
When added to sites with CSS1 compatibility I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).
Any idea how I can hide the broken image icons?
Notes:
I don't want to load empty images.
I tried width and height= 1px or 0px . didn't work.
specifying src="" also gives empty image icons.
Edit:
I found the solution:
add style="display:none" to the img definition (Not in CSS)

Have you tried wrapping the images inside a div and hiding the div instead?

My JS code includes some images that are empty at the beginning (without src attribute specified
That's not a valid state for an image. Best use a placeholder transparent image or leave the image out of the DOM until you can set a ‘real’ src attribute.
I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).
Doesn't happen for me, either ‘display: none’ or ‘visibility: hidden’ removes the visible image from the page. Example code demonstrating the problem, and which browser(s)?

The solution is quite simple:
add style="display:none" to the img definition (Not in CSS)

how about just having a placeholder div tag and replacing it with an image when the time comes to show the image? any decent ajax framework (e.g. jQuery) will make this easy to do so it works across all major browsers

in addition to display:none, maybe try setting visibility:hidden

If you are using a JavaScript library it may be worth applying a class to name to all of these images and letting the library handle it. Prototype example using a class name of myImages would be
var images = $$('.myImages');
if (image != null)
{
for (int i = 0; i < images.Length; i++)
{
images[i].hide;
}
}
You would still need to add the style attribute style="display: none;" to the images