キャンバスに画像をロードする（HTML/Javascript）

これは前に議論したことがあり、私は多くの記事を読んだことがあると主張していましたので、すぐに質問を破棄しないでください。キャンバスに画像をロードする（HTML/Javascript）

ユニファイドサイズのキャンバスに別の画像を読み込もうとしています。これは単一のイメージでも複数のイメージでも構いませんが、私は一度に1つのイメージを処理しています。

<?php 
    if ($record->photo != "") //make the first canvas 
    { 
    list($width, $height, $type) = getimagesize($record->photo); 
    echo "Width: " .$width. "<br />"; 
    echo "Height: " .$height. "<br />"; 
    ?> 
    <canvas id="my_canvas" width="341" height = "256"></canvas> 

    <body> 
    <script type="text/javascript" src="common.js"></script> 
    <script type="text/javascript"> 
    var img_src = "<?php echo $record->photo;?>"; 
    var width = "<?php echo $width;?>"; 
    var height = "<?php echo $height;?>"; 

    make_canvas('my_canvas', img_src, width, height); 
    </script> 

    <?php 
    }//if 1

等canvas2、3のための同様のブロックの端部にタグを閉じると：ここ

は、メインコード（HTML/JS/PHP）です。

"何らかの形で"機能するmake_canvas（）関数のバージョンがあります。つまり、ロード時にいくつかの画像をレンダリングすることがありますが、リフレッシュ時に改善する可能性があります表示する画像が複数ある場合は、正しく動作することはありません。

版1 - 矛盾と最後の画像キャッシュ：

function make_canvas(id, src, width, height) 
{ 

    if (width > 341) 
    { 
     var new_width = 341; 
     var ratio = new_width/width; 
     var new_height = Math.round(height * ratio); 
    } 
    else 
    { 
     var new_width = width; 
     var new_height = height; 
    } 
    document.write("id: " + id + "<br />"); 
    document.write("src: " + src + "<br />"); 
    document.write("new_height: " + new_height + "<br />"); 

    var canvas = document.getElementById(id), 
    context = canvas.getContext('2d');  
    base_image = new Image(); 
    //base_image.src = ''; 

    base_image.onload = function(){ 
     context.drawImage(base_image,0,0,new_width, new_height); 
    } 

    base_image.src = src; 
    }

バージョン2つの画像をロードすることができると私はIF状態でbase_image.completeを追加しようとしたリフレッシュ

function make_canvas2(id, src, width, height) 
{ 

    if (width > 341) 
    { 
     var new_width = 341; 
     var ratio = new_width/width; 
     var new_height = Math.round(height * ratio); 
    } 
    else 
    { 
     var new_width = width; 
     var new_height = height; 
    } 
    document.write("id: " + id + "<br />"); 
    document.write("src: " + src + "<br />"); 
    document.write("new_height: " + new_height + "<br />"); 

    var canvas = document.getElementById(id), 
    context = canvas.getContext('2d');  
    base_image = new Image(); 
    base_image.src = ''; 
    base_image.addEventListener("load", function() { 
    // execute drawImage statements here 
    context.drawImage(base_image,0,0,new_width, new_height); 
}, false); 
    //base_image.onload = function(){ }; 

    base_image.src = src; 

}

上にキャッシュされますonloadまたはWHILEループのonload関数内では、最初のロードで正しく表示された複数のイメージを決して達成できませんでした。私はどのような作業例でも、上記と似ていて、jQueryがなくても良いと思います。ロードされながら最後の画像はすべて、元の画像を上書きする理由

base_image = new Image();

厥：私はjusted

出典

2017-01-24 user2097141

は、あなたが誤ってこれを書き込むことによって、グローバルな画像オブジェクトを定義したと指摘しました。

var base_image = new Image(); // this is fixed

この例では、ほとんどすべての作業をjsで行うことができます。ただ、「実行コードスニペット」-Buttonを押すと、これはあなたが望むものである天気を教えてください：

var imageUrls = [ 
 
    'http://animal-dream.com/data_images/koala/koala6.jpg', 
 
    'https://i.stack.imgur.com/20n3G.jpg', 
 
    'https://upload.wikimedia.org/wikipedia/de/d/db/Das_G%C3%BCtermarktgleichgewicht_bei_einkommensabh%C3%A4ngiger_Nachfrage.jpg' 
 
]; 
 
var canvasWidth = 341; 
 
var canvasHeight = 256; 
 

 
function create_canvas(id, width, height) 
 
{ 
 
    var canvas = document.createElement('canvas'); 
 
    canvas.setAttribute('id',id); 
 
    canvas.setAttribute('width',width); 
 
    canvas.setAttribute('height',height); 
 
    document.getElementById('canvasCon').appendChild(canvas); 
 
} 
 

 
function make_canvas(id, src, width, height) 
 
{ 
 
    if (width > 341) 
 
    { 
 
    var new_width = 341; 
 
    var ratio = new_width/width; 
 
    var new_height = Math.round(height * ratio); 
 
    } 
 
    else 
 
    { 
 
    var new_width = width; 
 
    var new_height = height; 
 
    } 
 
    document.getElementById('msg').innerHTML += 'id: ' + id + '<br />src: ' + src + '<br /> new_height: ' + new_height + '<br />'; 
 
    var canvas = document.getElementById(id), 
 
    context = canvas.getContext('2d'); 
 
    var base_image = new Image(); 
 
    base_image.onload = function() { 
 
    context.drawImage(base_image, 0, 0, new_width, new_height); 
 
    } 
 
    base_image.src = src; 
 
} 
 

 
imageUrls.forEach(function(url,index){ 
 
    var canvasId = 'my_canvas'+(index+1); 
 
    create_canvas(canvasId,canvasWidth, canvasHeight); 
 
    make_canvas(canvasId, url, canvasWidth, canvasHeight); 
 
});

<div id="msg"></div> 
 
<div id="canvasCon"></div>

出典

2017-01-24 12:04:06 Blauharley

Blauharley、あなたは欲求不満の日の私のうちに保存されました！小さなもの（var）が大きな違いを生み出し、make_canvas（）のバージョン1（テスト済みのクロスブラウザではありません）のすべてが動作し始めました。そして、はい、あなたのコードは私が必要としていることをしています。どうもありがとう！ – user2097141

あなたは大歓迎です！私の答えを明らかにするために、私の答えを正しいものとしてマークしてください。ありがとうございました。 – Blauharley

キャンバスに画像をロードする（HTML/Javascript）

答えて

関連する問題