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 に答える