Get image Data from a <div> CSS style in javascript

Question

I have a css style which in its background it has an image for example it is like this code

.test {
    background-image: url("paper.gif");
    background-color: #cccccc;
}

well I also have a javascript code which is used to get average color of an image,

function getAverageRGB(imgEl) {

    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {r:0,g:0,b:0},
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data = context.getImageData(0, 0, width, height);
    } catch(e) {
        /* security error, img on diff domain */alert('x');
        return defaultRGB;
    }

    length = data.data.length;

    while ( (i += blockSize * 4) < length ) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i+1];
        rgb.b += data.data[i+2];
    }

    // ~~ used to floor values
    rgb.r = ~~(rgb.r/count);
    rgb.g = ~~(rgb.g/count);
    rgb.b = ~~(rgb.b/count);

    return rgb;
    }

As the above code shows I have to pass an image element into the function, but In fact I do not have any tag and I only have a div which its css has a background image, How can I read the images data? thansk

Research how to read styles from elements dynamically (getComputedStyle), and then once you got the image URL, create a new Image object in JavaScript, assign the URL as src, and then work from there in the image load handler ... — C3roe
– C3roe, Commented Nov 7, 2017 at 18:17
Couldn't you just fill the canvas with the background color (in this case it's #cccccc) before applying context.drawImage(imgEl, 0, 0);? — Joseph Marikle
– Joseph Marikle, Commented Nov 7, 2017 at 18:19
"but does this method downloads image twice?" - nope, that's what the cache is for ... — C3roe
– C3roe, Commented Nov 7, 2017 at 18:21

Kiogara · Accepted Answer · 2017-11-07 18:21:22Z

5

You can create a Image element using yours div background-img as source.

img = new Image();
img.src = divTest.style.backgroundImage;

answered Nov 7, 2017 at 18:21

Kiogara

6571 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MartinWebb · Accepted Answer · 2017-11-07 18:21:20Z

3

You need to modify the function getAverageRGB to draw the image from the url in the background of the div, then you just pass your div and the modified function will draw the image onto the canvas - see docs below.

This question solves that problem

Drawing an image from a data URL to a canvas

answered Nov 7, 2017 at 18:21

MartinWebb

2,0081 gold badge14 silver badges16 bronze badges

1 Comment

Majid Hojati Over a year ago

Thanks I tried to load image.src using an image linke but it returned a black color, It seems I am doing sth wrong

Collectives™ on Stack Overflow

Get image Data from a <div> CSS style in javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related