kleine frage zum img tag
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
array
bild
browser
code
datei
erstellen
farbe
format
grafik
http
illustrator
image
pixel
quadrat
radius
speichern
tag
url
vektor
verarbeiten
-
Hallo!
Ich habe eine kleine frage zum <img>-tag.
Wenn ich ein 8x8 pixel großes .png bild mit dem <img>-tag einfüge und auf 32x32 (oder 64x64) pixel änder vermischen sich die farben wodurch das bild nicht mehr so gut aussieht!
Ist es möglich das sich die einzelnen pixel nicht vermischen sondern einfach nur vervierfachen (oder verachtfachen)?
Wenn es direkt in HTML nicht möglich ist könnte mir dann vieleicht jemand sagen wie ich es beim bearbeiten mit Paint.NET oder GIMP 2 machen kann (bei Paint.NET ist es auch so "verschwommen" und bei GIMP 2 weiß ich nichtmal wie man überhaupt die Größe ändert). -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo tec-fantasy,
du könntest dein Bild als .svg speichern. SVG steht für scalable vector graphic, also eine skalierbare Vektor-Grafik.
Vektoren zeichnen sich dadurch aus, dass sie keine festen Pixel nutzen. Viel mehr beinhalten sie Informationen zu den einzelnen Bereichen deines Bildes. So wird bei einem gelben Kreis bspw. nicht jeder Pixel mit seiner Farbe gespeichert, sondern wo im Bild der Mittelpunkt des Kreises ist, welchen Radius der Kreis besitzt und mit welcher Farbe er gefüllt ist. So kann die Grafik auf jede beliebige Größe hochgerechnet werden. ;)
Mit dem .svg-Format sollte jeder gängige Browser in halbwegs aktueller Version klar kommen.
Wikipedia nutzt .svg zum Beispiel für das eigene Logo (http://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg). Wobei es dort auch hin und wieder zur .png-Datei gerendert wird.
Beitrag zuletzt geändert: 2.11.2014 0:58:33 von gatheringxp -
Ok danke für die Hilfe!
Ich werde es sofort mal versuchen! :)
EDIT:
Womit kann ich es als .svg speichern?
Mit Paint.NET ist das nicht machbar!
Beitrag zuletzt geändert: 2.11.2014 1:00:43 von tec-fantasy -
Hab gerade ein wenig gegoogled und es scheint doch nicht so leicht, wie von mir angenommen. Paint.NET kann das nur über Plugins und davon gibt es wohl noch nicht so viele ..
GIMP kann das nur eingeschränkt, da gibt es aber Tutorials von CHIP und ein paar anderen Seiten.
Ich persönlich habe das Glück die Creative Cloud von Adobe angemietet zu haben und denke oft nicht mehr drüber nach, dass man diese Dateiformate nicht mit jeder Software speichern kann. Sorry hierfür. Mit Illustrator kann man diese Vektoren erstellen. Dachte das ginge auch mit anderen Lösungen neben Adobe Illustrator und Corel Draw. :/
Ein anderes Dateiformat für Vektorgrafiken kenne ich leider adhoc nicht, insbesondre keins, das viele Browser unterstützen. Und mit pixelbasierten Formaten kannst du nicht einfach die Pixel ver-x-fachen, wie ursprünglich gefragt. Kann dir wohl doch nicht helfen, tut mir leid .. -
Im Prinzip willst Du laut Eröffungsthread die sogenannte "Interpolation" vermeiden. Das geht bei Gimp zB so:
http://www.gimp-handbuch.de/index.php/grundlagen-der-bildbearbeitung/16-pixelorientierte-grafiken/49-skalieren-von-grafiken-interpolation
Ich denke mal, für andere Programme kannst Du das selbst ergoogeln. -
Ich hab jetzt mal ein bisschen mit SVG probiert. Das ist dabei herausgekommen:
http://fuerderer.lima-city.de/public/svg.html
Das Bild ist nur 8x8 Pixel groß, aber in HTML auf 400x400 Pixel gestreckt. Den schwarzen Rahmen um das Bild habe ich mit CSS erstellt.
Das Bild wird dynamisch mit PHP erzeugt. Hier ist noch der Code dazu:<?php header("Content-Type: image/svg+xml"); echo '<?xml version="1.0" encoding="UTF-8"?>'; echo '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="8px" height="8px" viewBox="0 0 8 8">'; $farben=array("#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff"); for ($y=0; $y<8; $y++) { for ($x=0; $x<8; $x++) { $f=$farben[rand(0,5)]; echo "<rect x=\"$x\" y=\"$y\" width=\"1\" height=\"1\" fill=\"$f\"></rect>"; } } echo '</svg>'; ?>Jedem der 64 Pixel wird aus einem Pool von 6 Farben eine zufällige zugewiesen. Das lässt sich natürlich noch verändern zu einer statischen Grafik. -
Klingt ja schon sehr gut aber es gibt noch 1 kleines problem dabei!
Wenn ich ca. 5 Verschiedene Bilder mit insegsammt 48 bis 64 verschiedenen farben habe wäre das sehr viel arbeit alle bis zu 64 farben und das mind. 5 mal in einem Array zu Speichern!
Geht es vieleicht auch so das ich einfach nur diese 5 bild-dateien brauchen würde und von diesen irgendwie die pixel einfach nur so vergrößert werden würden ohne das ich alle bis zu 64 farbcodes pro bild in einen array schreiben müsste? -
Du willst also aus einem bestehenden Bild dieses SVG erstellen? Das ist mit PHP kein Problem. Sieh dir dazu diese Seite an: *klick*, dort gibts eine Dokumentation wie du Bilder mit PHP verarbeiten kannst. Was du tun musst: Pixel für Pixel das Bild »durchgehen« und ein Quadrat im SVG-Bild erstellen. Die Farbe (und das ist auch schon das Einzige, was du so bekommst) bekommst du dabei vom Bild, du brauchst also kein Array o.ä. dafür per Hand zu erstellen.
Brauchst du dazu noch Beispielcode, oder bekommst du das alleine hin?
Beitrag zuletzt geändert: 3.11.2014 13:53:30 von hackyourlife -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
