how to load canvas in jquery not from image but background-image?

Hi,

So here is my problem: I want to load canvas from the background image of a div
and not direct from an image and I fail.
Does some one know how to do that?

Here I give a link on a test page in my website in order you see the question better

build canvas from image src or background-image

you can see the first 10 images where it is OK (METHOD 1 classic canvas from img src)

at the bottom you see the 4 sprites background-image I fail to transform in CANVAS

I show the code I us'e for the first method I use for canvas from an image and that is OK:

<img class="bigimage" id = "IMG1a" alt="" src="img/ET1_448.jpg" width="100">

<img class="bigimage" id = "IMG2a" alt="" src="img/ET2_448.jpg" width="100">

<img class="bigimage" id = "IMG3a" alt="" src="img/ET3_448.jpg" width="100">

```
<div class="autocenter">
```

<canvas id="myCanvas_OUT0" width="303" height="539"></canvas>

```
</div>
```

and the JQUERY

```
$(".bigimage").click( function() 
```
```
{ 
```
```
img_srcout0="";
```
```
 img_srcout0 = $(this).attr("id"); 
```

elemout0 = document.getElementById("myCanvas_OUT0");

```
if (elemout0 && elemout0.getContext) 
```
```
{ 
```

contextout0 = elemout0.getContext("2d");

```
if (contextout0) 
```
```
      { 
```

      imgout0=document.getElementById(img_srcout0);

      contextout0.drawImage(imgout0,0,0);

```
      } 
```
```
} 
```

imgdout0 = contextout0.getImageData(0, 0, 303,539);

```
pixout0 = imgdout0.data; 
```
```
});
```

and that is fine.

But for responsive reason I want to use backgroundimages and here I fail to find a solution:

I try with backgound image in a sprite

Here is the code that I am trying to build

```
<div id="id-menu" class="c-menu"> 
```
```
SPRITE<br/> 
```
```
<ul class="icone"> 
```

<a href="#" id = "IMG1" ><li class="icone-1" id = "IMG1child" ></li></a>

<a href="#" id = "IMG2" ><li class="icone-2" id = "IMG2child" ></li></a>

<a href="#" id = "IMG3" ><li class="icone-3" id = "IMG3child" ></li></a>

<a href="#" id = "IMG4" ><li class="icone-4" id = "IMG4child" ></li></a>

```
</ul> 
```
```
 </div>
```

with the JQUERY

```
$("a").click( function() { 
```
```
img_srcout0=""; 
```

img_srcout0= $(this).children(":first").attr("id");

alert(img_srcout0); //unitl here it seems ok

elemout0 = document.getElementById("myCanvas_OUT0");

```
if (elemout0 && elemout0.getContext) 
```
```
{ 
```

contextout0 = elemout0.getContext("2d");

```
if (contextout0) 
```
```
      { 
```

      imgout0=document.getElementById(img_srcout0);

      contextout0.drawImage(imgout0,0,0);

```
      } 
```
```
} 
```

imgdout0 = contextout0.getImageData(0, 0, 303,539);

```
pixout0 = imgdout0.data; 
```
```
});
```

and the CSS

          
            .icone-1 { background-position: left top } 
           .icone-2 { background-position: 14.2857% top } 
           .icone-3 { background-position: 28.5714% top } 
           .icone-4 { background-position: 42.8571% top } 
           .icone-5 { background-position: 57.1428% top } 
           .icone-6 { background-position: 71.4285% top } 
           .icone-7 { background-position: 85.7142% top } 
           .icone-8 { background-position: right top } 
           ul { 
           padding:0px; 
           border:3px solid blue; 
           display: inline-block; 
           } 
           .icone li { 
           margin:auto; text-align:center; 
           vertical-align:bottom; padding:0px; 
           width: 75px; 
           height: 100px; 
           border-radius:16px; 
           border: solid white 5px; 
           opacity: 1; 
           background-image: 
           url("http://www.davidinlove.com/img/sprite_menu_DT.jpg"); 
           background-repeat: no-repeat; 
           display: inline-block; 
           list-style-type:none; 
           }

Thanks if Some One knows how to do that.

For me it is important to use in a responsive way and for loading times of sprite
faster.

Loading a lot of images is long for tablet and using sprite with background images

defines in mediaqueries enable load images of different sizes for different devices (mobile table desktop)

Thanks in advance

David ( @webtecgeek www.thecacaocafe.com )

Topic Participants
dherubeltec
jakecigar

how to load canvas in jquery not from image but background-image?

how to load canvas in jquery not from image but background-image?

Topic Participants

dherubeltec

jakecigar