Javascript 通过画布获取现有base64图像的像素颜色

在HTML文档中获取了一个图像。源是base64字符串。我想检索单击的像素的颜色。使用内存画布，我得到的是零

 function getColor(imagecontainer,top,left){
     var image = new Image();
     image.onload = function() {
         var canvas = document.createElement('canvas');
         var context = canvas.getContext('2d');
         context.drawImage(image, 0, 0);
         var myData = context.getImageData(Math.round(left)-2, Math.round(top)-2, 4, 4).data;
         console.log(myData, left, top);
     };
     image.src = imagecontainer.find("img").attr("src");  
 }

---

关于同一个问题还有很多其他问题，但是没有一个解决方案能为我解决这个问题。MyData始终包含零。

根据新信息更新：

原因很可能是主映像（imagecontainer.find（“img”））在被引用时未加载

如果DOM中存在此映像，则可以使用windows.onload运行脚本：

window.onload = function() {
  // code that uses the image
};

因为只有当所有内容都已加载（包括图像数据）时，此操作才会运行。可选地将内联onload处理程序添加到image标记（不推荐），或者通过JavaScript添加src并在那里监视onload事件

另一个可能的原因是，如果这是IE，并且映像在缓存中，则可能不会触发onload。您可以检查图像的

complete

属性来检查：

 var image = new Image();
 image.onload = onloadHandler;
 image.src = imagecontainer.find("img").attr("src");  
 if (image.complete) onloadHandler();

function onloadHandler() {
     var canvas = document.createElement('canvas');
     var context = canvas.getContext('2d');
     context.drawImage(image, 0, 0);
     var myData = context.getImageData(Math.round(left)-2, Math.round(top)-2, 4, 4).data;
 };

---

尽管您可以直接将其用于原始图像，而无需加载另一个具有相同url的图像。

您是否尝试获取1或16（如此处所示）像素？是的，读起来有点混乱，我稍后将对16像素进行插值。感谢您的响应，我将所有错误都保留在此处，以使代码更具可读性。如果图像已经加载了，我想不会触发onload。因此，如果我使用图像本身，我不需要加载。不过，我总是得到一个零数组。@d但我怀疑主映像甚至还没有加载。。您的脚本是否在windows.onload上运行？