Zahlen in Bilder umwandeln

Jochen · 21. Februar 2018

Guten Morgen,

kann ich eine Zahl wie z.B 345 oder 45345 per code in ein Image umwandeln?

pasted-from-clipboard.jpg pasted-from-clipboard.jpg

Wenn ich z.B. die Zahl 345 habe möchte ich ein image erstellen, das die Zahl 345 anzeigt, als Inhalt hat

Sempervivum · 21. Februar 2018

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.

Jochen · 21. Februar 2018

Das habe ich mir angeschaut und verstanden (?). Es ist - soweit ich es beurteilen kann - nicht prktikabel für meinen Zweck.

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.

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

Zum Hintergrund: Ich zeige nicht nur Zahlen sopndern auch z.B. Verkehrsschilder, Blumen, Autos usw an.

??

Sempervivum · 21. Februar 2018

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/…MLCanvasElement/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.

Sempervivum · 21. Februar 2018

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

Jochen · 22. Februar 2018

Wie Semper: Gut und Danke

basti1012 · 3. März 2018

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 .

Code

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)

Alles anzeigen

Ich glaube er erkennet das nicht

Code

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.

Code

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

basti1012 · 3. März 2018

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

Code

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)

Alles anzeigen

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

basti1012 · 3. März 2018

Natoll jetzt habe ich ein rückwärts random https://codepen.io/basti1012/pen/yvrMeN

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

Tags