robsite

kritzl

In den letzten zwei Monaten hab ich mit dem HTML5 canvas-Element rumgespielt. Rausgekommen ist ein kleines Malprogramm mit einem Forum drumherum.

Man kann Bilder im Browser malen, sie auf der Seite speichern und auf andere Bilder antworten.

Es sollte gut in Firefox 3.5+, Safari 4+ und Opera 9.6+ laufen (in Opera nur etwas unschön, mangels runder Ecken und box-shadow). Internet Explorer User müssen erstmal draußen bleiben, sorry.

/images/posts/0000/2110/kritzl_big.png

Die Funktionen:

  • Freihand-Linien, geglättet oder nicht
  • Rechtecke mit runden Ecken
  • Ellipsen und Kreise
  • Linien
  • Flood Fill mit Toleranz
  • Eye-Dropper Farbwähler
  • Colorpicker mit Alpha-Transparenz
  • Undo/Redo mit Tastaturshortcuts

Mein Plan war am Anfang, nur das Malwidget zu veröffentlichen, sodass sich jeder seine eigene GUI basteln kann. Ein Mini-Bildeditor als Wordpress-Plugin oder grafische CAPTCHAs wären interessant. Das gab ich aber bald auf, weswegen der Code nun eher schlecht wiederverwendbar ist. Ne Doku fehlt auch, wer also Fragen hat, einfach einen Comment posten.

Ich nehm clientseitig jQuery, jQuery UI, ein modifiziertes jQuery.hotkeys und BrowserDetect. Auf dem Server läuft CakePHP mit ImageMagick zum erstellen der Thumbnails.

Das ist nur die erste buggy-pre-alpha-Version und meine Todo-Liste ist noch lang. Gut wären z.B. bessere Pinsel, Zoom, Maltools ohne Anti-Aliasing (für Pixelart), Auswahlwerkzeuge, beliebige Bildgröße, Filter, Layer, weniger Bugs, optionale Useraccounts, Bild-Bewertungen oder ein schnellerer Flood-Fill Algorithmus.

Über Bugmeldungen, Verbesserungsvorschläge und vor allem lustige Bilder würde ich mich freuen :)

· ©, canvas, drawing, kritzl, tool ·

Kommentare

Hey,

ich nett das Tool :) kann man bestimmt noch lustige Sachen dazu machen, auf jeden Fall schon mal besser wie MS Paint xD
Aber was mir aufgefallen ist, ich wollte eine Antwort zum „Ubuntu Bild“ schreiben, und konnte es dann editieren und auch abspeichern, die originale Version ist nicht mehr mit drin, dafür aber meine neue ;)
Viel Glück beim Finden des Bugs noch und viel Spaß beim weiter entwickeln! ;)

MfG
T-Head

Rob

Thx fürs Feedback :)

An die originale Version bzw. den ganzen Thread/Baum kommst du über den „Thread“ Link über dem Bild: http://kritzl.robsite.de/images/view/189
Überleg ich mir vllt. mal was besseres.

Wenn ich Zeit hab, kommen als nächstes erstmal Useraccounts und schnellere Zeichentools.

iliis

Scheint als würdest du Konkurrenz kriegen: http://mugtug.com/sketchpad/ ;)

Anonymous

iliis, solche seiten gibts im überfluss, die bekommst du nur so hinterhergeschmissen

es gibt sogar browser-tools, die mit gimp mithalten können (allerdings von solchen noch keinen mit canvas gesehen, sondern nur in flash)

versteht mich nicht falsch, ich find kritzl trotzdem großartig. spätestens nachdem man sich mal kurz kritzl.js und kritzl_gui.js angeguckt hat, kann man sich schon denken dass da ein haufen arbeit dahintersteckt
vor allem die antwort-funktion gefällt mir :)

Rob

Hehe, liest wohl auch jemand Hacker News. mugtugs Tool ist schonmal ne ganze Ecke flexibler und schneller als kritzl, werd ich mir mal was abgucken :>

Anonymous

Du bekommst nochmal Konkurrenz:
http://editor.pixastic.com/
Der kann sogar Effekte machen! (Allerdings funktioniert der bei mir nicht…)

Rob

Nice. Effekte sind auch noch auf meiner Todo-Liste, wenn ich mal wieder Zeit finde.

Aber scheint echt noch ein wenig buggy zu sein. Funktioniert nur, wenn du eins der Sample Images lädst.

Mr.Green

Manche malen irgendwelchen müll…