canvas : image über array erstellen

Jofre

Erfahrenes Mitglied
wenn ich viele Bilder im Programm benutze, möchte ich nicht mit :

Beispiel

img1 = new Image();
img2 = new Image();
img3 = new Image();

img1.src = "Terrorist1.jpg";
img2.src = "Terrorist2.jpg";
img3.src = "Terrorist3.jpg";

ctx.drawImage(img1,400,400);
ctx.drawImage(img2,200,200);
ctx.drawImage(img3,100,500);

sonderrn ein Array benutzen. Das geht sicherlich oder?
. Was ich bei stackover flow gefunden habe, habe ich nicht kapiert.

Jochen
 
Die Bilder unterscheiden sich in den Dateinamen und den Abmessungen, d. h. diese müsstest Du im Array ablegen:
Javascript:
var imgs = [
    {filename: "Terrorist1.jpg", width: 400, height: 400},
    {filename: "Terrorist2.jpg", width: 200, height: 200},
    {filename: "Terrorist3.jpg", width: 100, height: 500}
];
imgs.forEach(function (im, idx) {
    im.obj = new Image();
    im.obj.src = im.filename;
    ctx.drawImage(im.obj, im.width, im.height);
});
Ungetestet, aber auf diese Weise sollte es funktionieren.
Die Objekte habe im Array hinzu gefügt, damit sie für eine weitere Verwendung zur Verfügung stehen.
 
PS: Mir scheint, da habe ich etwas falsch verstanden: Bei drei Parametern für drawImage handelt es sich um x und y. Du kannst es ja selber korrigieren.
 
Ich war in meinen Ausführungen zu kurz.

Ich möchte nicht alle Bilder auf einmal zeichnen sondern es werden im Programm mehrfach Bilder aus dem gesamten Bestand ausgewählt per Zufallsgenerator ausgewählt.
So könnte zum Beispiel im ersten Aufruf Bild 5 8 19 2 17ausgewählt werden und z.B im zweiten Aufruf Bild 4 5 6.

Ich möchte mit dem Array vermeidebn, dass ich zigmal schreiben muss
img1 = new Image();
img2 = new Image();
img3 = new Image();
,,,
...
...
...
img40=.....

img1.src = "Terrorist1.jpg";
img2.src = "Terrorist2.jpg";
img3.src = "Terrorist3.jpg";
...
...

img40.src= "terrorist40.jpg";

Es würde auch das Programm zu sehr aufblähen.
 
Ich möchte nicht alle Bilder auf einmal zeichnen sondern es werden im Programm mehrfach Bilder aus dem gesamten Bestand ausgewählt per Zufallsgenerator ausgewählt.
Wenn Du die Bilder erst Mal im Array hast, kannst Du das doch problemlos tun:
Javascript:
var imgs = [
    {filename: "Terrorist1.jpg", x: 400, y: 400},
    {filename: "Terrorist2.jpg", x: 200, y: 200},
    {filename: "Terrorist3.jpg", x: 100, y: 500}
];
imgs.forEach(function (im, idx) {
    im.obj = new Image();
    im.obj.src = im.filename;
});
und im weiteren Verlauf:
Code:
    shuffle(imgs);
    for (var i = 0; i < 5; i++ {
        var im = imgs[i]
        ctx.drawImage(im.obj, im.x, im.y);
    };
shuffle ist in Javascript nicht vordefiniert, aber Du findes Implementierungen z. B. hier:
https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
Selbstverständlich kannst Du die Anzahl und die Positionen auch zufällig fest legen. In diesem Fall und da die Dateinamen ja offensichtlich einem festen Schema folgen, kannst Du die Projektierung der Dateinamen und Positionen bei der Definition ganz weg lassen:
Javascript:
    for (var i = 0; i < 5; i++ {
        var im = imgs[i + 1]
        im.obj = new Image();
        im.obj.src = "Terrorist" + (i + 1) + ".jpg";
    };
 
Habe noch ein Problem:
Die Bilder werden bei Programmaufruf in das Array bilderGesamt gebrachtsind in bilderGesamt eingelesen.


Beispiel


Bilder Gesamt
(8) […]


0: "Images/FreundundFeind/Fe6.jpg"

1: "Images/FreundundFeind/Fe4.jpg"

2: "Images/FreundundFeind/Fr7.jpg"

3: "Images/FreundundFeind/Fr6.jpg"

4: "Images/FreundundFeind/Fr8.jpg"

5: "Images/FreundundFeind/Fr1.jpg"

6: "Images/FreundundFeind/Um4.jpg"

7: "Images/FreundundFeind/Um3.jpg"

length: 8

<prototype>: Array []

Ensprechender Programmteil

for (var i = 0 ; i < positionAktive.length; i++){
var imgg= new Image();
imgg.src=bilderGesamt;
var xx= xCoord[positionAktive];
var yy = yCoord[positionAktive];
ctx.drawImage(imgg, xx ,yy);
}


Da kommen nicht alle Bilder , die in bilderGesamt gespeichert sind

Beim ersten Aufruf des Programms kommen keine Bilder , beim zweiten Aufruf schon mehr aber nicht alle.

Müssen die Bilder vorab eingelesen werden mit onload oder ??
.
 
Müssen die Bilder vorab eingelesen werden mit onload oder ??
Da hattest Du wahrscheinlich schon die richtige Idee. Wenn Du die Bilder sofort nach dem Laden anzeigen willst, musst Du das onload-Event verwenden:
Javascript:
for (var i = 0 ; i < positionAktive.length; i++){
    var xx= xCoord[positionAktive];
    var yy = yCoord[positionAktive];
    var imgg= new Image();
    imgg.onload = function() {
        ctx.drawImage(imgg, xx ,yy);  
    };
    imgg.src=bilderGesamt[i];
}
 
Klasppt nicht. Es kommt kein Bild.


for (var i = 0 ; i < positionAktive.length; i++){
var xx= xCoord[positionAktive];
var yy = yCoord[positionAktive];
var imgg= new Image();
imgg.onload = function() {
console.log(" immg1 " , imgg);


ctx.drawImage(imgg, xx ,yy);
};
imgg.src=bilderGesamt;
console.log(" immg2 " , imgg.src);

Die Consolöe bringt:


immg2 ist ok

immg2 file:///C:/xampp/htdocs/Images/FreundundFeind/Fe5.jpg ashut.html:139:5
immg2 file:///C:/xampp/htdocs/Images/FreundundFeind/Fe8.jpg ashut.html:139:5
immg2 file:///C:/xampp/htdocs/Images/FreundundFeind/Fr3.jpg ashut.html:139:5
immg2 file:///C:/xampp/htdocs/Images/FreundundFeind/Fr4.jpg ashut.html:139:5
immg2 file:///C:/xampp/htdocs/Images/FreundundFeind/Fr6.jpg ashut.html:139:5
immg2 file:///C:/xampp/htdocs/Images/FreundundFeind/Fr2.jpg ashut.html:139:5
immg2 file:///C:/xampp/htdocs/Images/FreundundFeind/Um4.jpg



und das ??? keinen Schimmer

immg1 <img src="Images/FreundundFeind/Um1.jpg">
immg1 <img src="Images/FreundundFeind/Um1.jpg">
immg1 <img src="Images/FreundundFeind/Um1.jpg">

immg1
<img src="Images/FreundundFeind/Um1.jpg">

immg1
<img src="Images/FreundundFeind/Um1.jpg">

immg1
<img src="Images/FreundundFeind/Um1.jpg">

immg1
<img src="Images/FreundundFeind/Um1.jpg">

immg1
<img src="Images/FreundundFeind/Um1.jpg">


aber es kommt kein Bild
 
Da habe ich auch eine Weile gerätselt, aber mit forEach funktioniert es. Mein Testscript:

Javascript:
        var cv = document.getElementById("canvas1");
        var ctx = cv.getContext("2d");
        var bilderGesamt = ["images/dia0.jpg", "images/dia1.jpg", "images/dia2.jpg", "images/dia3.jpg"];
        // for (let i = 0; i < bilderGesamt.length; i++) {
        //     var xx = 10 * i;
        //     var yy = 10 * i;
        //     var imgg = new Image();
        //     imgg.onload = function () {
        //         ctx.drawImage(this, xx, yy);
        //     };
        //     imgg.src = bilderGesamt[i];
        // }
        bilderGesamt.forEach (function (item, i) {
            var xx = 10 * i;
            var yy = 10 * i;
            var imgg = new Image();
            imgg.onload = function () {
                ctx.drawImage(this, xx, yy);
            };
            imgg.src = item;
        });
 
Zurück