kostenloser Webspace werbefrei: lima-city


kleine frage zum img tag

lima-city: kostenloser WebspaceForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    tec-fantasy

    Benutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Stallbursche

    348 Gulden

    0 positive Bewertungen
    0

    tec-fantasy hat kostenlosen Webspace.

    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).
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. gatheringxp

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Knecht

    720 Gulden

    20 positive Bewertungen
    0

    gatheringxp hat kostenlosen Webspace.

    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
  4. Autor dieses Themas

    tec-fantasy

    Benutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Stallbursche

    348 Gulden

    0 positive Bewertungen
    0

    tec-fantasy hat kostenlosen Webspace.

    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
  5. gatheringxp

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Knecht

    720 Gulden

    20 positive Bewertungen
    0

    gatheringxp hat kostenlosen Webspace.

    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 ..
  6. sonok

    Moderator Kostenloser Webspace von sonok

    Moderator Scharfrichter

    24311 Gulden

    140 positive Bewertungen
    0

    sonok hat kostenlosen Webspace.

    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.
  7. fuerderer

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Bediensteter

    1630 Gulden

    26 positive Bewertungen
    1

    fuerderer hat kostenlosen Webspace.

    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.
  8. Autor dieses Themas

    tec-fantasy

    Benutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Stallbursche

    348 Gulden

    0 positive Bewertungen
    0

    tec-fantasy hat kostenlosen Webspace.

    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?
  9. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    Moderator Scharfrichter

    19580 Gulden

    163 positive Bewertungen
    0

    hackyourlife hat kostenlosen Webspace.

    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
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!