javascript - 如何获得透明元素后面的颜色？

Question

我在一个 body 有很多颜色的网站上工作。当内容向下滚动时，内容的背景会发生变化。
在下图中，您可以看到蓝色背景的正文。因此，当使用滚动条向下滚动内容时，背景图像也应与内容一起滚动。
因此，当滚动条停在蓝色之类的颜色时，会发生什么情况，然后菜单标题(主页)背景会自动更改为蓝色。

Answer 1

首先我们应该知道我们想要做什么。第一步实际上是获取图像的颜色，从而访问图像的属性。
但是浏览器无法直接获取图像本身的信息(当然，您可以从图像元素中获取信息)。然而，一种网络浏览器绘图方法让我们可以控制图像的各个方面:Canvas。

因此，首先我们必须将图像转换为 Canvas 元素。这相当简单地用 drawImage(img, posx, posy, canvasWidth, canvasHeight);

完成

我们还将 Canvas 图像+元素拉伸(stretch)到整个屏幕。我们也想在 Canvas 上定义尺寸的原因是因为这样 Canvas 会计算每个新生成的像素，所以我们可以访问每个新像素:

var screenWidth = window.innerWidth,
    screenHeight = window.innerHeight,
    c = document.createElement('canvas');
    ctx = c.getContext("2d"),
    img = document.getElementById("image");

    c.width = screenWidth;
    c.height = screenHeight;
    ctx.drawImage(img, 0, 0, screenWidth, screenHeight);
    $(c).attr('id', 'c');
    $('body').prepend(c);
    $(img).remove();

动态制作的 Canvas 元素将适合屏幕大小(请注意，这仅在网络浏览器首次启动时发生。因此当您调整大小时， Canvas 不会随屏幕调整大小)。

我们删除了图片，因为它不再有用了。在我看来，从图像转换为 Canvas 是一个很好的实践。正如您所确定的那样，图像将首先加载到浏览器中，然后转换为 Canvas 元素。

接下来我们要访问一个像素。您可以使用 getImageData(offsetX, offsetY, sizeX, sizeY).data; 访问像素数据； 将返回 RGBA 颜色数组。

现在 offsetX 和 offsetY 将是元素颜色选择器的偏移量。 请注意，由于背景是固定的，此元素偏移量应相对于网络浏览器视口(viewport)您可以使用 getBoundingClientRect();
尺寸仅为 1x1，因为我们需要 1 个像素。

这一切都应该在用户滚动时发生，您可以使用 .scroll(function); 捕获滚动事件:

   $(window).scroll(function () {
        var offset = document.getElementById('color').getBoundingClientRect(),
            offsetX = offset.left,
            offsetY = offset.top;

        var color = document.getElementById('c').getContext('2d').getImageData(offsetX, offsetY, 1, 1).data;
        $('header').css('background-color',"rgba("+ color[0] + ', ' + color[1] + ', '+ color[2] + ', ' + color[3] + ")");
    });

我们在 header 元素中添加带有前 4 个索引的 rgba 数组颜色(因为 rgba collor 模式永远不会有超过 4 个值)和纯 css。

将外部图像加载到 Canvas 中

当您想将外部图像转换为 Canvas 元素时，您可能会遇到此错误:

跨源资源共享策略拒绝跨源图像加载。

用于 security您无法完全访问此图像的原因。

如此处解释:HTML 5 canvas getImageData from an externally-loaded image

有一些外部主机支持这个，例如dropbox .

本地

但是，当您将其存储在本地时，它会正常工作。

jsFiddle

此方法已在 chrome、IE 和 firefox 中测试。

我想使用那些外部(保管箱)文件

我不确定为什么会发生这种情况，但出于某种原因，这种方法仍然存在一些安全问题。启用此 CORS您必须添加图像属性 .crossOrigin = "Anonymous";。但是，当您使用 HTML 加载图像时，该元素已在没有此属性的情况下生成。所以你应该在创建图像时分配这个属性:

 var canvas = document.getElementById("c"),
        ctx = canvas.getContext("2d"),
        screenWidth = window.innerWidth,
        screenHeight = window.innerHeight;
    // Using image WITH crossOrigin=anonymous
    // Succeeds in Chrome+Mozilla, Still fails in IE
    var externalImage2 = new Image();
    externalImage2.onload = function(){
        canvas.width= screenWidth;
        canvas.height= screenHeight;
        ctx.drawImage(externalImage2, 0, 0, screenWidth, screenHeight);
        // this will FAIL on a CORS violation
    }
    externalImage2.crossOrigin = "Anonymous";                     
    externalImage2.src="https://dl.dropboxusercontent.com/s/8g8lgmdx341j1d6/rainbow_gradient_horizontal.jpg";

这只是我上传到我刚刚分享照片的保管箱的照片。注意:

The way to convert a share link to a direct link is to change the domain from "www.dropbox.com" to "dl.dropboxusercontent.com". See https://www.dropbox.com/developers/blog/53/programmatically-download-content-from-share-links.

来源:Cross-origin image load from cross-enabled site is denied

这会创建一个图像并将其放入一个现有 Canvas 元素中。所以请注意，您的 HTML 中应该有一个 Canvas 元素。

jsFiddle

此方法仅适用于 chrome 和 firefox，其他浏览器仍存在一些安全问题。

另外请注意，捕获的像素是“color-pick”元素的左上角像素。例如，如果您希望它捕捉到元素的中间像素，则可以调整此偏移量。

---

这是一个非常有趣的问题。希望对您有所帮助!