Javascript <；img/>；从$（'；img）获取标记时，标记宽度和高度不正确。宽度（）/height（）

我目前正在尝试获取纹理图像的RGB数据，同时向用户显示纹理预览

用户将图像文件放入表单中，它应显示图像预览，同时将图像绘制到画布上，以获得每个像素的RGB值：

handleTextureImageDrop = (e) ->
  e.stopPropagation()
  e.preventDefault()
  if e.dataTransfer.files.length >= 1
    file = e.dataTransfer.files[0]
  if file
    reader = new FileReader()
    reader.onload = (loadEvent) ->
      img = $ '<img/>'
      img.attr
        src: loadEvent.target.result
      $(e.target).html img
    reader.onloadend = (loadendEvent) ->
      img = $(e.target).children 'img'
      width = img.width()
      height = img.height()
      canvas = $ '<canvas/>', 
        width: width
        height: height
      $('#wrapper').append canvas
      context = $('canvas').get(0).getContext '2d'
      context.drawImage img.get(0), 0, 0
      rgb = (for x in [0...width]
               for y in [0...height]
                 context.getImageData(x, y, 1, 1).data)
      canvas.remove()
      TEXTURE_FILES.push 
        image: file.name
        rgb: rgb
    reader.readAsDataURL file

handleTextureImageDrop=（e）->
e、 停止传播（）
e、 预防默认值（）
如果e.dataTransfer.files.length>=1
file=e.dataTransfer.files[0]
如果文件
reader=newfilereader（）
reader.onload=（loadEvent）->
img=$'
img=$（e.target）。儿童“img”
宽度=img.width（）
高度=img.height（）
画布=$“”，
宽度：宽度
高度：高度
$（'#包装器'）。附加画布
上下文=$（'canvas'）。获取（0）。获取上下文'2d'
context.drawImage img.get（0），0，0
rgb=（对于x英寸[0…宽度]
对于y英寸[0…高度]
getImageData（x，y，1，1）.data）
canvas.remove（）
纹理文件.push
image:file.name
rgb:rgb
reader.readAsDataURL文件

目前，它大约有50%的时间工作，但其余时间

宽度

和

高度

设置为

0

，因此像素数据上的迭代永远不会发生

这向我建议，在图像尚未加载到

标记的情况下，会发生某种竞争条件

这就是正在发生的事情吗？还是我错过了一些愚蠢而明显的东西

---

任何帮助都将不胜感激。

只有在加载图像后，您才能获得正确的宽度和高度。通常使用

$（img）.load

$(img).load(function(e){
     var w = $(img).width();
     var h = $(img).height();
});
$(img).attr("src", "http://....");

---

我不熟悉coffeescript，因此我无法理解您是否在当前代码中执行此操作。如果没有，请尝试一下。

咖啡脚本版本看起来会很不错。在任何情况下，关于“

尚未加载”问题，我认为您是对的。