当渐变滚动时如何更改 div 颜色？

Question

我有一张图片，其中有很多渐变颜色。它被滚动到页面中间时，缩略图颜色值会改变。如何实现这个效果？

我不确定，所以我发布了只包含HTML和CSS的JSFiddle。 JSFIDDLE

//code
#colors{

    width:123px;
    height:1360px ;
    background-image:url('http://s26.postimg.org/p4x2on37t/bgimage.jpg');
}

- user2794426

---

我在调色板上没有看到滚动条...还是你要求我们制作一个？ - Mr. Alien

你知道吗，你让我们制作一个插件？ - Mr. Alien

@adeneo已经关闭，他期望我们编写一个插件。 - Mr. Alien

@Mr.Alien：嗨，Alien，这难吗？ - user2794426

@AngelGuy 是的，如果你想要的话，可以查看这些... http://www.jquery4u.com/plugins/10-color-pickers-plugin/ - Mr. Alien

Answer 1

类似这样的代码可以获取颜色并在滚动时将其设置为缩略图。

var bg = $('#colors').css('background-image').replace(/(url\(|\)|\")/g,'');
var img = new Image();
img.onload = function() {
    console.log('loaded')
    var canvas = $('<canvas />').get(0);
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.width, img.height);

    $('#wrapper').on('scroll', function() {
        console.log('test')
        var top       = $(this).scrollTop();
        var height    = $(this).outerHeight();
        var x         = (height / 2) + top;
        var pixelData = canvas.getContext('2d').getImageData(10, x, 1, 1).data;
        console.log(pixelData)

        $('#preview').css('background', 'rgb('+pixelData[0]+', '+pixelData[1]+', '+pixelData[2]+')')
    }).trigger('scroll');
}
img.src = bg;
if (img.complete) img.onload();

FIDDLE

- adeneo

---

谢谢。这只在Chrome中有效，而不在Mozilla和IE中有效。无法从背景图片中选择颜色吗？为什么要将JPEG图像转换为其他格式？能否请您解释一下？ - user2794426

由于同源策略，您无法像这样在画布中使用来自另一个域的图像，因此我不得不将图像转换为Base 64以使其在JSFiddle中工作，但如果图像位于您网站上的同一域中，则可以直接使用该图像，而无需使用Base 64。 - adeneo

似乎其他浏览器未触发 onload 事件，请尝试在您的页面上使用图像 URL 而不是 base64，因为这似乎是导致问题的原因。 - adeneo

@AngelGuy - 其实这只是一个引用问题，Firefox在CSS返回的URL周围返回了额外的引号。对于IE来说，是错误的jQuery版本。已更新答案以使其适用于这些浏览器。 - adeneo

@AngelGuy - 你是否已经包含了jQuery，尝试在代码周围添加document.ready包装器，检查控制台是否有错误等？ - adeneo