0

我目前正在尝试获取纹理图像的 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

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

<img/>这将向我表明，在图像尚未加载到标签中的情况下发生了某种竞争情况。

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

任何帮助将非常感激。

4

1 回答 1

2

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

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

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

于 2012-08-18T02:57:22.400 回答