Wer kann mir helfen (canvas)?

565zehtdfhdg · 07. Sep. 2016

Hallo zusammen,

meine HTML-Kenntnisse sind auf dem Stand von 1998 stehen geblieben, ich habe beruflich und privat auch nichts mit jeglicher Art von Programmierung und Skripten zu tun.

Dementsprechend habe ich es nicht geschafft, das zu verwirklichen, was ich wollte.

Ich habe ein Bild (so in etwa - wird noch bearbeitet: Imgur: The most awesome images on the Internet) und möchte ein Formular mit einem Textfeld haben, das den eingegebenen Text in das Schild "druckt".
Das Bild soll man anschließend lokal speichern können.

Das ist vermutlich nicht kompliziert, ein Bekannter sagte mir da bräuchte man ein/en "Canvas", aber ich konnte als Laie das halt nicht umsetzen.

Hat jemand eine halbe Stunde Zeit und mag mir das machen?
Als Dankeschön stelle ich mir einen kleinen Amazon Gutschein vor - den Wert müssten wir je nach geschätzten Arbeitsaufwand verhandeln.

Danke fürs Lesen und Antworten.

kkapsner · 08. Sep. 2016

So kompliziert ist das jetzt nicht:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<input id="input"><br>
<canvas id="canvas"></canvas>
<script type="text/javascript">
(function(){
	var img = new Image();
	img.onload = function(){
		var input = document.getElementById("input");
		var canvas = document.getElementById("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext("2d");
		ctx.textAlign = "center";
		ctx.fillStyle = "#000000";
		ctx.font = "20pt Arial";
		input.oninput = function(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
			ctx.fillText(this.value, canvas.width / 2, canvas.height / 2);
		};
		input.oninput();
	};
	img.src = "HIER DIE URL ZUM BILD";
}());
</script>
</body>
</html>

565zehtdfhdg · 08. Sep. 2016

Vielen Dank kkapsner!

Wenn ich das in mein Frontpage kopiere und eine URL einfüge, heißt es "Fehler in Zeile 37, Zeichen 17
";" erwartet"

Firefox öffnet das Dokument ohne Fehler, da ist eine Textzeile, aber es passiert nichts.

Kann man auch 2 oder 3 Textzeilen einfügen, indem in die Zeilen einfach kopiere und mehrfach einfüge?

Wenn ich den Text an einer bestimmten Stelle haben möchte, muss ich dann bei ctx.textAlign = "center"; statt dem center einfach die Pixel angeben, also 356,200 ?

Sorry für die dummen Fragen, das muss sich sicherlich seltsam anhören.

kkapsner · 08. Sep. 2016

565zehtdfhdg schrieb:
"Fehler in Zeile 37, Zeichen 17
";" erwartet"

Welche Zeile ist denn 37 bei dir?

565zehtdfhdg schrieb:
Firefox öffnet das Dokument ohne Fehler, da ist eine Textzeile, aber es passiert nichts.

Stimmt die URL zum Bild auch wirklich. Bei mir funktioniert alles.

565zehtdfhdg schrieb:
indem in die Zeilen einfach kopiere und mehrfach einfüge?

Nein, da musst du noch mehr ändern. Ist aber auch kein Hexenwerk.

565zehtdfhdg schrieb:
statt dem center einfach die Pixel angeben, also 356,200 ?

Nein, die Position wird bei fillText gesetzt. Das center sagt nur, dass der angegebene Referenzpunkt in der Mitte des geschrieben Textes ist.

PS: Frontpage ist keine besonders gute Wahl... ich arbeite nur mit einem reinen Texteditor.

565zehtdfhdg · 09. Sep. 2016

Jetzt gehts bei mir auch, anscheinend hab ich mich wirklich im Link verschrieben. (Zeile 37 gibts gar nicht..)
Bei meiner letzten Website - Erfahrung 1998 war Frontpage das Gelbe vom Ei, mehr kann ich leider nicht

Unten ist mein Code wie er funktioniert inkl. der Bild-Url.
Beim Schild habe ich 3 Flächen die ich "beschreiben" möchte.

Könntest du mir helfen, die 3 Felder (auch von der Position richtig) zu beschriften?

Vielen Dank!

HTML:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<input id="input"><br>
<canvas id="canvas"></canvas>
<script type="text/javascript">  
(function(){  
	var img = new Image();  
	img.onload = function(){  
		var input = document.getElementById("input");  
		var canvas = document.getElementById("canvas");  
		canvas.width = img.width;  
		canvas.height = img.height;  
		var ctx = canvas.getContext("2d");  
		ctx.textAlign = "center";  
		ctx.fillStyle = "#000000";  
		ctx.font = "20pt Arial";  
		input.oninput = function(){  
			ctx.clearRect(0, 0, canvas.width, canvas.height);  
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  
			ctx.fillText(this.value, canvas.width / 2, canvas.height / 2);  
		};  
		input.oninput();  
	};  
	img.src = "https://www.dropbox.com/s/a7wzgxy1xsggo3b/Schild%20gelb%20web.jpg?dl=1";  
}());  
</script>  
</body> 
</html>

kkapsner · 10. Sep. 2016

565zehtdfhdg schrieb:
Bei meiner letzten Website - Erfahrung 1998 war Frontpage das Gelbe vom Ei, mehr kann ich leider nicht

Das ist hald auch schon fast 20 Jahre her...

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<input id="line1"><br>
<input id="line2"><br>
<input id="line3"><br>
<canvas id="canvas"></canvas>
<script type="text/javascript">
(function(){
	var lines = [
		{
			x: 242,
			y: 154,
			input: document.getElementById("line1")
		},
		{
			x: 242,
			y: 248,
			color: "#333333",
			font: "20pt Arial",
			input: document.getElementById("line2")
		},
		{
			x: 242,
			y: 338,
			input: document.getElementById("line3")
		}
	];
	
	var img = new Image();
	img.onload = function(){
		function update(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
			lines.forEach(function(line){
				ctx.textAlign = line.textAlign || "center";
				ctx.textBaseline = line.textBaseline || "middle";
				ctx.fillStyle = line.color || "#000000";
				ctx.font = line.font || "20pt Arial";
				ctx.fillText(line.input.value, line.x, line.y);
			});
			
		}
		var canvas = document.getElementById("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext("2d");
		lines.forEach(function(line){
			if (line.input){
				line.input.addEventListener("input", update);
			}
		});
		update();
	};
	img.src = "https://www.dropbox.com/s/a7wzgxy1xsggo3b/Schild%20gelb%20web.jpg?dl=1";
}());
</script>
</body>
</html>

565zehtdfhdg · 11. Sep. 2016

1000 Dank kkapsner!

Lass mir per PN deine Adresse zukommen, ich möchte mich mit einer Kleinigkeit bedanken.

Eine letzte Bitte: Manche möchten auf dem mittleren Teil es Schildes wahrscheinlich etwas mehr Text schreiben, weil das Feld ja größer ist.
Kannst du 2 weitere Zeilen einfügen, so dass
- der obere Teil des Schildes aus einer Zeile besteht
- der mittlere Teil aus 3 Zeilen und
- der untere Teil aus 1 Zeile?

Ich kann mich nur nochmal bedanken und werde dir ein kleines Dankeschön zukommen lassen.

MERCI!!!

kkapsner · 11. Sep. 2016

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<input id="line1"><br>
<input id="line2"><br>
<input id="line3"><br>
<input id="line4"><br>
<input id="line5"><br>
<canvas id="canvas"></canvas>
<script type="text/javascript">
(function(){
	var lines = [
		{
			x: 242,
			y: 154,
			input: document.getElementById("line1")
		},
		{
			x: 242,
			y: 220,
			color: "#333333",
			input: document.getElementById("line2")
		},
		{
			x: 242,
			y: 248,
			font: "23pt Arial",
			input: document.getElementById("line3")
		},
		{
			x: 242,
			y: 276,
			color: "#333333",
			input: document.getElementById("line4")
		},
		{
			x: 242,
			y: 338,
			input: document.getElementById("line5")
		}
	];
	
	var img = new Image();
	img.onload = function(){
		function update(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
			lines.forEach(function(line){
				ctx.textAlign = line.textAlign || "center";
				ctx.textBaseline = line.textBaseline || "middle";
				ctx.fillStyle = line.color || "#000000";
				ctx.font = line.font || "20pt Arial";
				ctx.fillText(line.input.value, line.x, line.y);
			});
			
		}
		var canvas = document.getElementById("canvas");
		canvas.width = img.width;
		canvas.height = img.height;
		var ctx = canvas.getContext("2d");
		lines.forEach(function(line){
			if (line.input){
				line.input.addEventListener("input", update);
			}
		});
		update();
	};
	img.src = "https://www.dropbox.com/s/a7wzgxy1xsggo3b/Schild%20gelb%20web.jpg?dl=1";
}());
</script>
</body>
</html>

565zehtdfhdg schrieb:
MERCI!!!

Bitte - gern geschehen.

Wer kann mir helfen (canvas)?

565zehtdfhdg

New member

kkapsner

Super Moderator

565zehtdfhdg

New member

kkapsner

Super Moderator

565zehtdfhdg

New member

kkapsner

Super Moderator

565zehtdfhdg

New member

kkapsner

Super Moderator