代码之家  ›  专栏  ›  技术社区  ›  Majid Hojati

从javascript中的CSS样式获取图像数据

  •  2
  • Majid Hojati  · 技术社区  · 7 年前

    我有一个css样式,它的背景中有一个图像,例如,它是这样的代码

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

    我还有一个javascript代码,用于获取图像的平均颜色,

    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;
        }
    

    正如上面的代码所示,我必须将图像元素传递到函数中,但实际上我没有任何标记,我只有一个div,它的css有一个背景图像,我如何读取图像数据? 坦斯克

    2 回复  |  直到 7 年前
        1
  •  5
  •   Kiogara    7 年前

    您可以使用div背景img作为源创建图像元素。

    img = new Image();
    img.src = divTest.style.backgroundImage;
    
        2
  •  3
  •   MartinWebb    7 年前

    您需要修改函数getAverageRGB以从div背景中的url绘制图像,然后只需传递div,修改后的函数就会将图像绘制到画布上-请参阅下面的文档。

    Drawing an image from a data URL to a canvas