2013-04-11 33 views
6

Zrobiłem kilka badań dla edytora WYSIWYG i znalazłem cedenta, który wydaje się być miły, ale muszę mieć możliwość skopiowania/wklejenia obrazu do edytora.Wklej obraz do strony internetowej

Znalazłem tę stronę, która robi dokładnie to, czego potrzebuję http://pasteboard.co/, więc jest to możliwe, ale nie mogę znaleźć sposobu jej wykonania.

Czy masz jakieś pomysły lub rozwiązania?

Wolałbym rozwiązanie w czystym html5/javascript i unikanie jakichkolwiek wtyczek, ale silverlight lub flash jest również do zaakceptowania.

+0

Dlaczego głosowanie w dół? –

+0

Nie głosowałem, ale powiedziałbym, że to dlatego, że pytasz o rozwiązanie, nie próbując czegoś najpierw. – Daedalus

+0

Wypróbowałem, zanim opublikuję to pytanie, tak jak zawsze, ale to, co znalazłem, nie działa lub tylko w Chrome, więc nie sądziłem, że warto go publikować. –

Odpowiedz

9

Są dwa sposoby na poradzenie sobie z tym, łatwy i trudny sposób.

Łatwy sposób: Wykorzystaj numer Clipboard API. To jest interfejs API "HTML5", ale jest poprawnie obsługiwany tylko w Chrome. Umożliwi to dostęp do wklejonego obrazu ze schowka jako Blob. Możesz następnie wysłać ten numer Blob do swojego serwera za pomocą żądania XHR2.

Trudna droga: Niestety, to jest to, co musisz zrobić we wszystkich przeglądarkach innych niż Chrome, i to nie jest ładne. Obejmuje to tworzenie ukrytego, edytowalnego elementu DIV wewnątrz "wklejonego elementu docelowego". To otrzyma wklejony obraz. Następnie należy narysować obrazek na <canvas>, który następnie należy przekonwertować na Blob. Zaczekaj, robi się coraz lepiej. W niektórych przypadkach może zajść potrzeba wyświetlenia obrazów pośrednich w wielu domenach (po stronie serwera) (prawdopodobnie w wielu przypadkach). Może to być wymagane, jeśli serwer, na którym znajduje się obraz, nie zezwala na żądania CORS dotyczące obrazów, które hostuje. Możesz przeczytać więcej o tej sytuacji w this MDN article.

Narzędzie do przesyłania w języku javascript, które obsługuję, Fine Uploader, obsługuje już przesyłanie obrazów za pomocą wklejania, ale w Chrome tylko w tym momencie. Pomyślałem, że przejdę do kłopotów z zaimplementowaniem tego w przeglądarkach API innych niż schowka, jeśli otrzymam wystarczającą liczbę żądań. Szczerze mówiąc, ponieważ obsługa obrazów nieobsługujących CORS w przeglądarkach, które nie implementują interfejsu Schowka API, wymaga pośredniczenia serwera po stronie obrazu, nie wydaje się, żeby to było warte wysiłku (chyba, że, oczywiście, moja baza użytkowników mówi mi, że oni tego chcą).

Mam nadzieję, że to pomoże.

+0

Trudna droga jest w porządku. Widziałem, że w firefox działa pasta kopiowania, ale obraz jest wklejony, ponieważ URL danych jest sposobem na wykorzystanie tego zachowania i implementację edytowalnego elementu div tylko dla IE? Nie mam problemu, jeśli działa tylko w IE10 –

+0

Tylko dla informacji użyłem repozytorium Github pasteboard.co i twoich linków do implementacji rozwiązania https://github.com/JoelBesada/pasteboard –

Powiązane problemy