Question

在HTML文档中有图像。 Source是一个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始终包含零。

Answer 1

根据新信息

更新：

原因可能只是主图像（imagecontainer.find（＆＃34; img＆＃34;））在引用时没有被加载。

如果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;
 };

虽然您可以直接将其与原始图像一起使用，但不使用相同的网址加载另一个。

通过画布

1 个答案: