アップロード前の画像のサイズ変更 - キャンバスからの読み取り - 幅と高さの画像0

Question

アップロードの前に画像のサイズを変更しようとしていますが、これを達成するためにJS/Jqueryを使用しています。私のサーバーでは、30MB以上のすべての要求を単に拒否します。私はこのコードを使用しています

：

$("input[type='file']").change(function() { 

     console.log("function works"); 

     // from an input element 
     var filesToUpload = this.files; 
     console.log(filesToUpload); 

     var img = document.createElement("img"); 
     img.src = window.URL.createObjectURL(this.files[0]); 

     console.log("image: ", img); 
     console.log("the image is: ", img.width); 

     var MAX_WIDTH = 800; 
     var MAX_HEIGHT = 600; 
     var width = img.width; 
     var height = img.height; 

     if (width > height) { 
      if (width > MAX_WIDTH) { 
      height *= MAX_WIDTH/width; 
      width = MAX_WIDTH; 
      } 
     } else { 
      if (height > MAX_HEIGHT) { 
      width *= MAX_HEIGHT/height; 
      height = MAX_HEIGHT; 
      } 
     } 

     canvas = $("#uploading_canvas").get(0);; 

     canvas.width = width; 
     canvas.height = height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0, width, height); 

     var dataurl = canvas[0].toDataURL("image/png"); 

     //var file = canvas.mozGetAsFile("foo.png"); 
    }); 

最初console.logの出力は、画像があることを示しているが、何とかそれは何の幅や高さを持っていません。このコードで画像をアップロードすると、atmが変更されません。ここで

は、コンソール・ログ出力は、次のとおりです。

画像が欠落しているためDataToUrlが定義されていませんか？

Answer 1

コメントに説明されているように、画像には読み込みに時間がかかるため、画像関連のコードを追加のonload関数にラップすると問題が解決しました。あなたのイメージの画像が...読み込みに時間が必要であり、あなたは**のonloadイベント内のコードを使うべき理由があるという理由だけで...

 $(img).load(function() { 

      canvas = $("#uploading_canvas").get(0); 


      var MAX_WIDTH = 600; 
      var MAX_HEIGHT = 450; 
      var width = img.width; 
      var height = img.height; 

      if (width > height) { 
       if (width > MAX_WIDTH) { 
       height *= MAX_WIDTH/width; 
       width = MAX_WIDTH; 
       } 
      } else { 
       if (height > MAX_HEIGHT) { 
       width *= MAX_HEIGHT/height; 
       height = MAX_HEIGHT; 
       } 
      }  

      canvas.width = width; 
      canvas.height = height; 
      var ctx = canvas.getContext("2d"); 
      ctx.drawImage(img, 0, 0, width, height); 

      var dataurl = canvas.toDataURL("image/png"); 

     });