ein HTML-Bildelement dynamisch pixelate

Question

Ich bin ein Bild auf einer Webseite zu nehmen, und dann Javascript (oder was auch immer wäre am besten geeignet), um dynamisch ‚pixelate‘ es (zum Beispiel in 20px Quadrate). Dann, wenn der Benutzer nach unten scrollt die Seite, ich brauche das Bild nach und nach in der Auflösung zu erhöhen, bis es nicht mehr pixelig.

Irgendwelche Ideen, wie ich über das tun dies gehen könnte? Ich weiß, ich php könnte ein Bild und mehrmals, um die Größe und nur das Bild wechseln, aber das würde erfordern mehrere zusätzliche Bilder zu laden. Außerdem weiß ich, ich könnte wahrscheinlich den Effekt mit Blitz & Pixelbender tun, aber ich will, es erreichen innerhalb der Grenzen von HTML5, CSS und Javascript, wenn möglich.

Schätzen Sie irgendwelche Gedanken!

Update: So etwas wie diese, aber mit Javascript anstelle von Flash? http://www.reflektions.com/miniml/template_permalink.asp?id= 390

Answer 1

Sie können das Bild in einem versteckten <canvas> Element machen. Verwenden Sie dann eine Ableitung der hier beschriebenen Technik http: //dev.opera.com/articles/view/html-5-canvas-the-basics/#pixelbasedmanipulation . Um eine pixelig Version des Bildes in einem zweiten <canvas> Elemente zu erstellen abnehmend mit je fillRect's . Auf diese Weise können auch die ursprünglichen Bilddaten puffern.

Bearbeiten Ich würde 2 verwenden <canvas> Elemente, so dass Sie nur noch holen und das Originalbild ziehen einmal. Vielleicht könnten Sie dieses Bild in dem gleichen <canvas> Elemente Puffer / Cache, sondern durch sie außerhalb der Sichtöffnung Zeichnung ich bin nicht sicher, ob dies möglich ist, aber.

Answer 2

würde ich eine Berechnung verwenden, wo Sie die Breite in Pixel durch das Quadrat der Breite und dann die Höhe durch das Quadrat der Höhe geteilt geteilt bekommen. Dies würde Ihnen die niedrigere Auflösung Sie suchen.

Dann können Sie einen Weg finden, um die Auflösung zu dem Ergebnis, oder greifen die Farbe jeden Pixel an der Position (Höhe und Breite) / 2 des Platzes Ihrer Suche zu ändern. Dann erzeugen sie in div-Tags oder eine Tabelle mit der entsprechenden Farbe und Größe schließlich in das Bild seiner selbst zur Folge hat.

habe ich eine wahrscheinlich schnelle Idee, wo Sie mehrere Versionen des Bildes haben und ihren Z-Index oder ihre Sichtbarkeit ändern, wie Sie blättern. Grundsätzlich kann jedes Bild würde die unterschiedlichen Auflösungen hat. Wenn Sie, dass zu vielen Bilder zu tun haben, dann würde nicht diese Lösung so effizient sein, da es eine Menge Bildbearbeitung sein würde, aber man kann immer eine Batch-Bearbeitung tun.

Lassen Sie mich sehen, ob ich mehr Ideen denken kann, dann werde ich bearbeiten.

Answer 3

Hier finden Sie aktuelle http://close-pixelate.desandro.com/

Erläuterung hier: https://stackoverflow.com/a/8372981/22470

Answer 4

Nicht in einer tragbaren Weise.

Das könnte in Flash machbar sein. Firefox JS Erweiterungen erlauben es Bilder wie JS-Arrays zu lesen, Base64-Strings etc. Sie mit „1 DIV = 1 Pixel“ experimentieren könnten Hack, aber es ist schwer, eine vernünftige Größe des Bildes zu jeder angemessenen Geschwindigkeit zu bekommen. Wenn Sie wirklich hyper fühlen, könnten Sie versuchen, Base64-codierte Bilder on the fly mit den Daten zu erstellen: URI ... viele Möglichkeiten, aber keine gute ...