Zahlen in Bilder umwandeln

Ja, das geht, mit Canvas kannst Du ein Bild erzeugen und einen beliebigen Text hinein schreiben, also auch ein Zahl. Um die Handhabung zu erleichern, empfehle ich eine Bibliothek wie jCanvas.

Zitat

Ich möchte rund 50 Zahlen per random erzeugen. Diese Zahlen sollen dann für die weitere Verwendung als Bilder wie

Zahl1.jpg

Zahl2.jpg

..

..

zahl50.jpg

zur Verfügung stehen.

Diese Zahlen spreche ich in meinem Programm an verschiedenen Stellen an. Ich zeige zum Beispiel Einige ,wieder zufällig, ausgewählt an und der User muss dann Bestimmte davon anklicken. Wie das mit canvas realisiert werden kann ist mir vollkommen schleierhaft.

Alles anzeigen

Sollte alles kein Problem sein. Du kannst beliebig viele Canvas-Elemente anlegen und mit Zahlen versehen, auch zufällig.

Zitat

Ich müsste aus einem Canvas ein JPG Bild machen.

Sieh dir die Funktion toDataURL an, damit ist das möglich:

https://developer.mozilla.org/de/docs/Web/AP…ement/toDataURL

Ich vermute, dass Du das betreffende Bild auf deiner Seite anzeigen willst. Dann kannst Du das Ergebnis von toDataURL direkt als src für ein img-Element verwenden.

Möchtest das Bild dagegen auf dem Server speichern, wäre es eher angebracht, das Ganze mit PHP zu erledigen.

https://jsfiddle.net/Sempervivum/ypx8vwm4/2/

Ich versuche aus den Script vom Sempervivum ein Capacha zubauen ,was ich als Email bestätigung nehmen will ,damit mich kein bot ärgert.

Das script hier funktioniert gut ,das ist nicht das Problem .Doch irgendwie funktioniert das rechnen mit den array zeichen nicht .

var zeichen = ['+','-','/','*'];
var maxnr = 10;
function makeRandomImages() {
 
        var canvas = $("<canvas></canvas>");
        canvas.attr({width: "300", height: "50"});
        $("body").append(canvas);
        var rndnr = Math.floor(Math.random() * maxnr);
    var rndnr1 = Math.floor(Math.random() * maxnr);  
        var wat = Math.floor(Math.random() * 3);
   var rechne=Math.round(rndnr+''+String(zeichen[wat])+''+rndnr1);

alert(rechne)

Ich glaube er erkennet das nicht

String(zeichen[wat])

In Math.round .

Als alert wird mirdas rechen zeichen angezeigt ,aber das rechnen klappt nicht . immer nur NAN

was gibt es da für ein trick

EDIT: So bekomme ich zahlen raus ,aber das ergebniss stimmt nicht immer.

   var rechne=parseInt(rndnr)+String(zeichen[wat])+parseInt(rndnr1);
   rechne=Math.floor(parseInt(rechne));
   alert(rechne)

Ok nach langen testen tun und machen habe ich nur eine möglichkeit gefunden die geht

var zeichen = ['+','-','/','*'];
var maxnr = 10;
function makeRandomImages() {
 
        var canvas = $("<canvas></canvas>");
        canvas.attr({width: "300", height: "50"});
        $("body").append(canvas);
        var zahl1 = Math.floor(Math.random() * maxnr);
    var zahl2 = Math.floor(Math.random() * maxnr);  
        var wat = Math.floor(Math.random() * 3);
        
          switch (zeichen[wat]) {
    case "+": ergebnis = zahl1 + zahl2;
              break;
    case "-": ergebnis = zahl1 - zahl2;
              break;
    case "*": ergebnis = zahl1 * zahl2;
              break;
    case "/": ergebnis = zahl1 / zahl2;
              break;
  }
 
   alert(ergebnis)

Fals einer ne bessere Lösung hat bitte sofort sagen .Danke

Natoll jetzt habe ich ein rückwärts random

und weiß nicht wieso und wie ich das beheben kann?

Probiert das mal aus .1-3 aufgaben zeigt er richtig an. aber ab dann kann man eine falsche antwort ein tippen und dann erscheint die richtige rechen aufgabe dazu.

also genau verkehrt rum obwohl das ein bild ist ,und so gesehen über den canvas laufen muß.

Also das checke ich jetzt gar nicht mehr