イメージはBase64に変換され、ブートストラップモーダルのキャンバスに表示されません

Question

私はユーザーからイメージを取り込み、クロップ操作を実行してbase64に変換し、それをキャンバスに描画します。クロッピングのために私はjcropライブラリを使用しています。

$(document).on("change","#photograph",function() { 
    $("#picCrop").modal('show'); 
    $("#views").empty(); 

    image = null; 
    canvas = null; 
    alert("canvas"+(canvas==null)+" Image"+ (image==null)); 

    loadImage(this); 
    $(this).replaceWith('<input id="photograph" type="file" class="form-control">'); 
}); 

ここで私はalert("canvas"+(canvas==null)+" Image"+ (image==null));ことなく、画像が大きい画像の場合には、私が警告ボックスのボタンを押す前にいくつかの時間を待っている場合にのみレンダリング取得され、キャンバス上に表示されていない、問題に直面しています。

フィドルリンク：https://jsfiddle.net/govi20/spmc7ymp/5/（結果を確認するためにalert行をコメントアウト）

Answer 1

ここでの問題は、Firefox用の画像の読み込みは通常、次のステップに進む前に、すでに正しいサイズを持っている必要があることです。そしてキャンバスをそれに付け加えるためのモーダルが必要です。

https://jsfiddle.net/a0e5dt98/

$(document).on("change", "#photograph", function() { 
    $(this).replaceWith('<input id="photograph" type="file" class="form-control">'); 
    $("#picCrop").modal('show'); 
    loadImage(this); 
}); 

$('#picCrop').on('shown.bs.modal', function(e) { 
    validateImage(); 
}) 

そしてそれは、画像の選択からloadImageを呼び出します。次に、現在の既存のdivに貼り付けるモーダルの読み込み時にその画像を検証します。これは、imageLoadがモーダルロードよりも時間が短いことを前提としています。理論的には、大量のイメージをローカルにロードして、アンロードされたイメージを検証できない場合があります。

次に、検証と接辞を再び分割して、firefoxがサイズを正しく取得できるようにします。

function validateImage() { 
    console.log("validateimage.") 
    if (canvas != null) { 
    image = new Image(); 
    image.onload = affixJcrop; 
    image.src = canvas.toDataURL('image/png'); 
    } else affixJcrop(); 
} 

function affixJcrop() { 
    console.log("affixJcrop") 
    if (jcrop_api != null) { 
    jcrop_api.destroy(); 
    } 
    $("#views").empty(); 
    $("#views").append("<canvas id=\"canvas\">"); 
    canvas = $("#canvas")[0]; 
    context = canvas.getContext("2d"); 
    console.log(image.width); 
    console.log(image.height); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    context.drawImage(image, 0, 0); 
    $("#canvas").Jcrop({ 
    onSelect: selectcanvas, 
    onRelease: clearcanvas, 
    boxWidth: crop_max_width, 
    boxHeight: crop_max_height, 
    minSize: [100, 100], 
    setSelect: [0, 0, 100, 100] 
    }, function() { 
    jcrop_api = this; 
    }); 
    clearcanvas(); 
}