Anzeige

canvas : image über array erstellen


#1
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
 

Sempervivum

Erfahrenes Mitglied
#2
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.
 
#4
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.
 

Sempervivum

Erfahrenes Mitglied
#5
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";
    };
 
#7
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 ??
.
 

Sempervivum

Erfahrenes Mitglied
#8
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];
}
 
#9
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
 

Sempervivum

Erfahrenes Mitglied
#10
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;
        });
 

Sempervivum

Erfahrenes Mitglied
#12
Wenn es vor dem imgg.onload stehen würde, könnte genau das entgegen gesetzte passieren: Ist das Bild schon im Cache könnte das Laden sehr schnell gehen, so dass das onload feuert, bevor der Handler in der folgenden Zeile registriert ist.
 
Anzeige

Neue Beiträge

Anzeige