javascript - 通过 Canvas 获取现有base64图像的像素颜色

Question

在 HTML 文档中获取图像。源是 base64 字符串。我想检索被点击的像素的颜色。使用内存 Canvas ，我得到的只是零。

 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 始终包含零。

Answer 1

根据新信息更新:

原因可能只是主图像 (imagecontainer.find("img")) 在引用时未加载。

如果此图像存在于 DOM 中，您可以使用 windows.onload 来运行您的脚本:

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

因为这只会在所有内容都已加载时运行，包括。图像数据。可选地向图像标记添加内联 onload 处理程序(不推荐)，或通过 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 的另一个图像。