Question

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

那是怎么回事？或者我错过了一些愚蠢而明显的东西？

非常感谢任何帮助。

Answer 1

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

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

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

从$（'img）获取<img/>标签宽度和高度不正确.width（）/ height（）

1 个答案: