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

我有一张有很多渐变颜色的图片。它在页面中向下滚动。因此，当图像颜色停在页面中心时，缩略图的颜色值就会发生变化。如何做到这一点

我不确定，所以我只发布了带有html和css的JSFIDLE

---

类似的内容应该在滚动时获得颜色并将其设置为缩略图

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();

var bg=$（'#colors'）.css（'background-image'）。替换（/（url\（|\）\124;\”）/g'）；
var img=新图像（）；
img.onload=函数（）{
console.log（'loaded'）
var 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'）。在（'scroll'，function（）上{
console.log（'test'）
var top=$（this.scrollTop（）；
var height=$（this.outerHeight（）；
变量x=（高度/2）+顶部；
var pixelData=canvas.getContext（'2d'）.getImageData（10，x，1，1）.data；
console.log（像素数据）
$（'#preview'）.css（'background'，'rgb（'+pixelData[0]+'、'+pixelData[1]+'、'+pixelData[2]+'））
}).触发器（“滚动”）；
}
img.src=bg；
如果（img.complete）img.onload（）；

---

我在调色板上没有看到任何滚动条……或者你要求我们制作一个滚动条？不需要滚动条。你希望我们如何从图像中获得颜色？这需要画布和相当复杂的代码，你应该尝试自己编写。你知道你要求我们制作插件是正确的吗？@AngelGuy是的，如果你需要的话想要，看看这些..谢谢你。这只在chrome中起作用。在mozilla和IE中不起作用。不能从背景图像中选择颜色吗？为什么你要将jpeg图像转换为其他格式。请解释一下。由于相同的来源政策，你不能在画布中使用来自其他域的图像，所以我必须转换image将其改为Base 64以使其在JSFIDLE中工作，但是如果图像位于站点中的同一个域上，您可以只使用该图像，而不必使用Base 64。其他浏览器似乎没有触发onload事件，请使用图像url而不是Base 64在您的页面上尝试，因为这似乎是导致问题的原因。@AngelGuy-实际上，它只是引用问题，Firefox会在CSS返回的URL周围返回额外的引号。对于IE来说，它是错误的jQuery版本。更新了答案以与这些浏览器一起工作。@AngelGuy-您包括了jQuery，尝试添加文档。代码周围的包装准备就绪，检查控制台是否有错误等？

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();