2009-05-27 20 views
6

Jaki jest najlepszy sposób generowania danych obrazu z zawartości elementu canvas HTML?Generowanie danych obrazu z elementu Canvas HTML

Chciałbym utworzyć dane obrazu w taki sposób, aby można je było przesłać do serwera (nie jest konieczne, aby użytkownik mógł bezpośrednio zapisywać do pliku). Dane obrazu powinny mieć wspólny format, taki jak PNG lub JPEG.

Rozwiązania, które działają poprawnie w wielu przeglądarkach, są preferowane, ale jeśli każde rozwiązanie zależy od przeglądarki, najnowsze wersje Firefoksa powinny być ukierunkowane.

Odpowiedz

2

Myślę, że lib, którego można użyć, to Canvas2Image, używa natywnych funkcji z Canvas, ale nie będzie działać w żadnej przeglądarce. Mam zoptymalizowaną wersję tej biblioteki, jeśli chcesz, podzielę się nią z Tobą.

Następnie można uzyskać wygenerowany Data URI i wysłać go za pomocą Ajax do serwera.

+0

Dzięki, to brzmi jak to, czego potrzebuję. Byłbym wdzięczny za zoptymalizowaną wersję. Powinieneś być w stanie znaleźć mój adres e-mail, odwiedzając moją stronę internetową wymienioną w moim profilu. – Doug

+0

Nie ma problemu! http://flotr.googlecode.com/svn/trunk/flotr/flotr/prototype/lib/canvas2image.js Zmieniłem renderowanie BMP, aby mieć kanał alfa i kilka optymalizacji prędkości. W rzeczywistości korzystałem z bezpłatnej biblioteki, nad którą pracuję, więc jest za darmo i zawsze będzie. –

+0

Dzięki, bardzo! Projekt, który planuję, najprawdopodobniej będzie miał wolne źródło, ponieważ będzie to głównie do użytku osobistego. – Doug

4

Firefox i Opera mają metodę toDataURL(), która zwraca PNG w formacie danych URL. Możesz przypisać wynik do pola formularza, aby przesłać go na serwer.

Adres URL danych jest zakodowany w base-64, więc będziesz musiał go zdekodować po stronie serwera. Trzeba też usunąć "dane: image/png;" część oczywiście.

Powiązane problemy