• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Farbwerte unter dem Mauszeiger in Feld o.ä. anzeigen

M

McFire

New member
Gibt es eine Möglichkeit, mit einem Script den Farbwert an der Mausposition an einer definierten Stelle der Seite darzustellen ?
Ich bin kein Freund davon, alle möglichen Programme und Applets reinzuladen, davon abgesehen , daß ich ja nicht weiß, welchen Browser mein Besucher hat.
Mit dem Ausgeben der Mausposition geht das ja mit recht wenig Code, vlt gibts sowas auch für die Farbe? Was ich gefunden habe, ist immer recht aufgebauscht und geht meist nicht (bei mir) Und Canvas möchte ich noch ein Weilchen ignorieren.
 
Ich schreibe hin und wieder mal einfache Websites für Bekannte. Die sind auch absichtlich mit nur dem allernötigsten Scripting, weil ich meine, HTML+CSS bieten durchaus (und zunehmend) ansprechende optische Möglichkeiten.
Beispiel - h t tp://w ww.bunde.de/LRC_new/__Fort_Henry/fort_henry_start.html
Geschrieben wird immer in der Hinsicht, daß später auch mal ein Anderer sich in den Code hineinfindet. (Wobei mir meine älteren Sachen heute auch nicht mehr gefallen )
Und da möchte ich zu Anfang ein Werkzeugprogramm zur Verfügung stellen, wo mein "Kunde" mir mal ein paar Fragen beantworten kann anhand angezeigter Werte. Einer davon wäre dann eine Farbe an einem Ort.
Mit dem Canvas, das wundert mich. Mein Webeditor ist aus einem Jahr, wo es Canvas sicher noch nicht gab. Und dort kann ich auch über eine Palette (die ein Bild ist) fahren und die Farb-Zahlen rollen.
Aber nun ja, ich hab vlt nur noch kein Tut zu Canvas gefunden, was für so einfache Gemüter wie ich geschrieben ist LOL
 
McFire schrieb:
Mit dem Canvas, das wundert mich. Mein Webeditor ist aus einem Jahr, wo es Canvas sicher noch nicht gab. Und dort kann ich auch über eine Palette (die ein Bild ist) fahren und die Farb-Zahlen rollen.
Zum Vergrößern anklicken....
Ich denke nicht, dass da der Wert direkt aus dem Bild ausgelesen wird, sondern die Farbe aus der Mausposition berechnet wird.

Aber Canvas sind jetzt nicht so kompliziert. Die Farbe eines Pixels kann man recht einfach mit CONTEXT.getImageData() auslesen.
 
Muß ich mal schaun, ob ich da mal ein unverwuseltes Tut zu Canvas finde. Vlt. war ich auf einer Angeberseite gelandet :grin:
Befassen muß ich ja mal damit. Ich versuch halt immer erst einfache Wege zu finden. Deshalb hatte ich auch irrtümlich gedacht, wenn 15 Zeilen Code reichen, um die Mausposition h/v zu zeigen, gehts da auch so einfach.
Jedenfalls erstmal Danke :icon7:
 
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>

</head>
<body>
<button id="load" autofocus>load</button>
<canvas id="canvas"></canvas>
<div id="color"></div>
<script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js?modules=localFile"></script>
<script type="text/javascript">
(function(){
	var loadButton = kkjs.$("load");
	var canvas = kkjs.$("canvas");
	var ctx = canvas.getContext("2d");
	var ctx = canvas.getContext("2d");
	var colorOutput = kkjs.$("color");
	var img = new Image();
	function loadImage(){
		canvas.height = img.height;
		canvas.width = img.width;
		ctx.clearRect(0, 0, img.width, img.height);
		ctx.drawImage(img, 0, 0, img.width, img.height);
	}
	kkjs.event.add(img, "load", loadImage);
	kkjs.event.add(loadButton, "click", function(){
		kkjs.localFile.load(undefined, undefined, {loadAs: "dataURL"}).on("load", function(dataURL){
			img.src = dataURL;
		});
	});
	
	kkjs.localFile.enableFileDrop().on("drop.files", function(ev){
		var reader = new FileReader();
		reader.onload = function(result){
			img.src = this.result;
		};
		var file = ev.dataTransfer.files[0];
		reader.readAsDataURL(file);
	});
	kkjs.event.add(canvas, "mousemove", function(ev){
		var mouse = kkjs.event.getMousePosition(ev).sub(kkjs.node.getPosition(canvas));
		var data = ctx.getImageData(mouse.left, mouse.top, 1, 1).data;
		var color = "rgba(" + data[0] + ", " + data[1] + ", " + data[2] + ", " + data[3] +")";
		colorOutput.innerHTML = colorOutput.style.backgroundColor = color;
	});
	kkjs.event.add(canvas, "mouseleave", function(){
		colorOutput.innerHTML = colorOutput.style.backgroundColor = "";
	});
}());
</script>
</body>
</html>

Das ganze kkjs-Zeugs kannst du mehr oder weniger ignorieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben