Question

我正在一个身体颜色很多的网站上工作。当内容向下滚动时，内容的背景会发生变化。
在下图中，您可以看到带有蓝色背景的正文。因此，当使用滚动条向下滚动内容时，背景图像也应该与内容一起滚动。
那么当滚动条停止在蓝色这样的颜色然后自动菜单标题（Home）背景应该变为蓝色时会发生什么。

Answer 1

首先，我们应该知道我们想做什么。第一步实际上是获得图像的颜色，从而访问图像的属性。
然而，浏览器无法获得图像本身的直接信息（当然，您可以从图像元素中获取信息）。然而，一个webbrowser绘制方法让我们控制图像的每个方面：画布。

首先，我们必须将图像转换为canvas元素。这可以通过drawImage(img, posx, posy, canvasWidth, canvasHeight);

完成

我们还将画布图像+元素拉伸到整个屏幕。我们想要在画布上定义大小的原因是因为画布将计算每个新生成的像素，因此我们可以访问每个新像素：

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元素，适合屏幕大小（请注意，这只是在webbrowser的第一次启动时。因此，当您调整画布大小时，不会随屏幕调整大小。）

我们删除图片，因为它已经没用了。在我看来，从图像到画布的转换是一个很好的实践。您将确定图像将首先在浏览器中加载，然后转换为画布元素。

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

现在offsetX和offsetY将是元素颜色选择器的偏移量。 请注意，此元素偏移应相对于webbrowsers视口，因为背景已修复您可以使用getBoundingClientRect();执行此操作我们想要1个像素，大小只有1x1。

这一切都应该在用户滚动时发生，您可以使用.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] + ")");
    });

我们只使用前4个索引添加rgba数组颜色（因为和rgba collor模式永远不会有更多的4个值），使用普通css到header元素。

将外部图像加载到画布

如果要将外部图像转换为canvas元素，可能会出现此错误：

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

由于security原因，您无法完全访问此图片。

如此处所述：HTML 5 canvas getImageData from an externally-loaded image

有一些外部主机支持此功能，例如dropbox。

本地

但是当你只是在本地存储它时它会正常工作。

jsFiddle

此方法在chrome，IE和firefox中进行了测试。

我想使用那些外部（dropbox）文件

我不确定为什么会发生这种情况，但由于某种原因，这种方法仍存在一些安全性差异。要启用此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";

这只是我上传到我的Dropbox的图片，我刚刚分享了照片。注意：

将共享链接转换为直接链接的方法是将域名从“www.dropbox.com”更改为“dl.dropboxusercontent.com”。请参阅https://www.dropbox.com/developers/blog/53/programmatically-download-content-from-share-links。

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

这会创建一个图像并将其放入 excisting 画布元素中。请注意，您的HTML中应该有一个canvas元素。

jsFiddle

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

另外需要注意的是，捕获的像素是'color-pick'元素的左上角像素。如果要捕获该偏移量，可以调整此偏移量，例如，元素的中间像素。

这是一个非常有趣的问题。我希望它有所帮助！

Answer 2

好吧，如果家里和内容之间没有乐队，你可以将家庭栏的背景颜色设为透明。

.home{
 background:transparent;
 }

如何获得透明元素背后的颜色？

2 个答案:

将外部图像加载到画布

jsFiddle

jsFiddle