Laden von Bildern in Canvas (HTML/Javascript)

Ich weiß, dass dies bereits besprochen wurde und ich habe viele Artikel gelesen und versucht, was als funktionierend bezeichnet wurde, also verwerfen Sie meine Frage bitte nicht sofort.Laden von Bildern in Canvas (HTML/Javascript)

Ich versuche, verschiedene Bilder in eine Leinwand einheitlicher Größe zu laden. Es kann ein einzelnes Bild oder mehrere Bilder sein, aber ich verarbeite jeweils ein Bild.

Hier ist der Hauptcode (HTML/JS/PHP):

<?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

ähnlicher Block für canvas2, 3 usw. mit Schluss-Tag am Ende.

Hier sind Versionen der make_canvas() -Funktion, die "irgendwie" funktionieren. Das bedeutet, dass sie manchmal Bilder beim Laden rendern, aber möglicherweise beim Aktualisieren verbessern. Wenn mehr als ein Bild angezeigt werden soll, funktioniert es nie richtig.

Version 1 - inkonsistent und speichert das letzte Bild:

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; 
    }

Version 2: Ein einzelnes Bild laden kann und das Caching auf Refresh

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; 

}

versuchte ich base_image.complete in IF-Bedingung hinzugefügt Für die Onload- oder WHILE-Schleife innerhalb der Onload-Funktion könnte es jedoch niemals möglich sein, mehrere Bilder bei einer ersten Ladung korrekt anzuzeigen. Ich würde alle Arbeitsbeispiele schätzen, vorzugsweise ähnlich wie oben und ohne jQuery.

Quelle

2017-01-24 user2097141

ich nachgeführt darauf hingewiesen, dass Sie versehentlich ein globales Bild-Objekt definiert das durch das Schreiben:

base_image = new Image();

Das ist, warum das letzte Bild alle früheren Bilder überschrieben, während geladen.

Hoffe, dieses Beispiel hilft Ihnen, können Sie die meiste Arbeit über js. Drücken Sie einfach die "run-Code-Snippet" -Button und sagen Sie mir, ob das ist, was Sie wollen:

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>

Quelle

2017-01-24 12:04:06 Blauharley

Blauharley, gespeichert Sie meine aus Tage der Frustration! Kleine Dinge (var) machen einen großen Unterschied, alles begann mit der Version 1 meines make_canvas() zu funktionieren (noch nicht Cross-Browser getestet). Und ja, dein Code tut, was ich brauche. Danke vielmals! – user2097141

Gern geschehen! Bitte markiere meine Antwort als richtig, damit es klar wird. Vielen Dank. – Blauharley

Laden von Bildern in Canvas (HTML/Javascript)

Antwort

Verwandte Themen