从 javascript 中的 <div> CSS 样式获取图像数据答案

【问题标题】：Get image Data from a <div> CSS style in javascript从 javascript 中的 <div> CSS 样式获取图像数据
【发布时间】：2017-11-08 02:21:22
【问题描述】：

我有一个 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 有一个背景图像，我怎样才能读取图像数据？谢谢

【问题讨论】：

我可以假设paper.gif 具有透明度吗？
@yes 如果它更容易，它也可以是 png 或 jpg
研究如何动态地从元素中读取样式（getComputedStyle），然后在获得图像 URL 后，在 JavaScript 中创建一个新的Image 对象，将 URL 分配为src，然后在图像load处理程序中从那里开始工作...
你不能在应用context.drawImage(imgEl, 0, 0);之前用背景颜色（在本例中为#cccccc）填充画布吗？
"但是这种方法会下载两次图像吗？" - 不，这就是缓存的用途...

标签： javascript html css

【解决方案1】：

您可以使用自己的 div background-img 作为源来创建 Image 元素。

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

【讨论】：

【解决方案2】：

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

这个问题解决了这个问题

Drawing an image from a data URL to a canvas

【讨论】：

谢谢我尝试使用图像链接加载 image.src 但它返回黑色，看来我做错了什么