データからHTML 5キャンバスに描画できませんUri

Question

私は何時間も試していて、挫折しています。マイデータウリイメージは未知の理由のために私のキャンバスに書き込みません....ここ

は私のコードです...

function addImage() { 

var allfiles = $("#postAttachPhoto")[0].files; 
var container = $("#ajaxImageContainer"); 
var linkContainer = $("#scrapedLinkContainer"); 
var imagePreview = $("#previewImages"); 
var textArea = $("#postTextArea"); 



// Handle Inserting The Image Container and Adjusting Sizes 
if (!container.is(':visible')) { 
    container.show(); 
    textArea.removeClass('imgPad'); 
textArea.removeClass('bothPad'); 
textArea.removeClass('linkPad'); 

    // is the link ele visible? 
    if (!linkContainer.is(':visible')) { 
     textArea.addClass('imgPad'); 
    } 
    else{ 
     textArea.addClass('bothPad'); 
     container.addClass('linkMargin'); 
    } 
} 

$(allfiles).each(function() { 
    var file = $(this); 
    var mime = file[0].type; 
    var reader = new FileReader(); 


    reader.onload = function (e) { 
     var imageSource = e.target.result; 

     var image = new Image(); 
     var canvas = document.createElement('canvas'); 
     var imagePreview = $("#previewImages"); 
     var number = 1 + Math.floor(Math.random() * 1000); 

     canvas.id = "canvas_"+number; 
     var ctx = canvas.getContext("2d"); 
     var resize = {}; 

     image.onload = function(){ 
      ctx.drawImage(this,0,0); 
      resize = calculateAspectRatioFit(image.width,image.height,'200','1000'); 
      canvas.width = resize.width; 
      canvas.height = resize.height; 
      imagePreview.append(canvas); 

      /*var previewImage = $("<img onClick='rotateImage(this);'/>"); 
     previewImage.attr("style", "width:250px;"); 
     previewImage.attr("src", e.target.result); 
     previewImage.attr("class", 'previewImg'); 
     previewImage.attr("class", 'previewImg'); 
     previewImage.attr("id", 'previewImg_' + number); 
     imagePreview.append(previewImage); 
     */ 
     }; 
     image.src = imageSource; 


    }; 
    reader.readAsDataURL(file[0]); 


}); 
autosize.update(textArea); 
} 

注：コメントアウトコードは画像タグを介して表示するために動作します。 主な目的は、90度の回転を可能にすることによって、この画像を修正できることです。キャンバスに読み込もうとしているので、imgタグからの作業はありませんでした。

Answer 1

画像を読み込んだ後にキャンバスサイズを変更すると問題が発生しました。 サイズ変更コンポーネントを削除した後、コードは正常に機能しました！

@Manuel Ottoのおかげで助けになりました。