Javascript 实施Lokesh Dhakar'；s"；“色贼”；图书馆的结果是；未捕获类型错误：无法读取属性'；0'；“无效”的定义；

我正在尝试实现Lokesh Dhakar的“颜色小偷”库

预期结果是上传后立即显示主色调和调色板

我的假设是，代码的以下部分出现了一些错误：

window.addEventListener('load', function() {
    document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.getElementById('image_0');
          img.src = URL.createObjectURL(this.files[0]); // set src to file url
          extractColors(img.id);
      }
    });
  });

当我在

dcolor=colorshift.getColor（document.getElementById（image））结束时，出现“未捕获类型错误”

请看下面我的努力：



基于Lokesh Dhakar的“颜色小偷”
元素风格{
}
.图像部分{
边缘底部：80px；
}
div{
显示：块；
}
.图像包裹{
位置：相对位置；
线高：1米；
最小高度：240px；
背景色：var（--悬停背景色）；
边界半径：var（--边界半径xl）；
}
.运行功能按钮{
位置：绝对位置；
最高：50%；
左：10%；
宽度：8雷姆；
高度：8雷姆；
边缘顶部：-4rem；
左边缘：-4rem；
边界：无；
边界半径：50%；
颜色：var（--链接颜色）；
背景色：白色；
边框：4px实心变量（--链接颜色）；
字号：2rem；
字体大小：var（--bold）；
光标：指针；
文本转换：大写；
大纲：无；
}
.无触摸标签{
显示：内联；
}
.触摸标签{
显示：无；
}
.目标图像{
边界半径：var（--边界半径xl）；
过渡：边界半径0.2s 0.3s；
}
.目标图像{
显示：块；
宽度：20%；
边界半径：var（--边界半径xl）var（--边界半径xl）0；
}
.手表{
宽度：3rem；
高度：3雷姆；
}
斯沃奇普先生{
宽度：3rem；
高度：3雷姆；
}
.手表{
显示：内联块；
背景#d3；
边框颜色：#000；
边界半径：32px；
边界半径大：8px；
边界半径xl:12px；
}
斯沃奇普先生{
显示：内联块；
背景#d3；
边框颜色：#000；
边界半径：32px；
边界半径大：8px；
边界半径xl:12px；
}
var颜色；
var-colorp；
addEventListener（'load'，function（））{
document.querySelector（'input[type=“file”]”）。addEventListener（'change'，function（）{
if（this.files&&this.files[0]）{
var img=document.getElementById（'image_0'）；
img.src=URL.createObjectURL（this.files[0]）；//将src设置为文件URL
提取颜色（img.id）；
}
});
});
函数提取颜色（图像）{
colorTheep=新的colorTheep（）；
dcolor=colorsteep.getColor（document.getElementById（image））；//错误！
document.getElementById（'dswatch_0'）.style.backgroundColor='rgb（'+dcolor[0]+'、'+dcolor[1]+'、'+dcolor[2]+'）；
colorp=colorsteep.getPalette（document.getElementById（图像），8）；
document.getElementById（'swatchp_0'）.style.backgroundColor='rgb（'+colorp[0][0]+'、'+colorp[0][1]+'、'+colorp[0][2]+'）；
document.getElementById（'swatchp_1'）.style.backgroundColor='rgb（'+colorp[1][0]+'、'+colorp[1][1]+'、'+colorp[1][2]+'）；
document.getElementById（'swatchp_2'）.style.backgroundColor='rgb（'+colorp[2][0]+'、'+colorp[2][1]+'、'+colorp[2][2]+'）；
document.getElementById（'swatchp_3'）.style.backgroundColor='rgb（'+colorp[3][0]+'、'+colorp[3][1]+'、'+colorp[3][2]+'）；
document.getElementById（'swatchp_4'）.style.backgroundColor='rgb（'+colorp[4][0]+'、'+colorp[4][1]+'、'+colorp[4][2]+'）；
document.getElementById（'swatchp_5'）.style.backgroundColor='rgb（'+colorp[5][0]+'、'+colorp[5][1]+'、'+colorp[5][2]+'）；
document.getElementById（'swatchp_6'）.style.backgroundColor='rgb（'+colorp[6][0]+'、'+colorp[6][1]+'、'+colorp[6][2]+'）；
document.getElementById（'swatchp_7'）.style.backgroundColor='rgb（'+colorp[7][0]+'、'+colorp[7][1]+'、'+colorp[7][2]+'）；
}


主色调：
调色板：
我想出了解决问题的办法。有关应替换
窗口的代码段，请参见下文。addEventListener（'load'，function（）{…}
：

window.addEventListener('load', function() {
      document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (document.querySelector('input[type="file"]').files[0]) {
          var img = document.getElementById('image_0');
          img.id = document.getElementById('image_0').id;
          var reader = new FileReader();
          reader.readAsDataURL(document.querySelector('input[type="file"]').files[0]);
          reader.onload = async function () {
            await getResult();
            function getResult(){
              img.src = reader.result;
            }
            extractColors(img.id);
          };
          reader.onerror = function (error) {
            console.log('Error: ', error);
          };

      }
    });

请看一下“this”…请添加一个显示问题本身实际问题的链接，不要只是添加一些指向外部资源的链接，这些链接可能由于任何原因都无法访问。您将链接突出显示为代码。它们不是代码。另外，我相信您在问题中看到了关于链接到JSFIDLE而没有链接的红色大警告。请这样做正如你被要求在此处发布的那样。链接腐烂。网站崩溃。未来的访问者需要一个完整的示例。@johnheridan请你详细说明一下好吗？抱歉，我现在时间紧迫，无法完全回答。我建议你在img.src=URL.createObjectURL（this.files[0]）行上设置一个断点；//将src设置为文件url。查看this对象的名称，看看它是否是您期望的对象。