javascript - 从 $('img).width()/height() 获取时 标签宽度和高度不正确

Question

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

用户将图像文件放入表单中，它应该显示图像的预览，同时将图像绘制到 Canvas 上以获取每个像素的 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

就目前情况而言，它的工作时间约为 50%，但其余时间 width和height设置为0 ，因此像素数据的迭代永远不会发生。

这对我来说意味着在图像尚未加载到 <img/> 时发生了某种竞争条件。标签还没。

这是正在发生的事情吗？或者我错过了一些愚蠢而明显的事情？

任何帮助将不胜感激。

Answer 1

只有在图像加载后，您才能获得正确的宽度和高度。通常使用 $(img).load 来实现此目的。

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

我不熟悉coffescript，所以我无法理解你是否在当前的代码中这样做。如果没有请尝试一下。