Siła pasta wydarzenie do kodowania obrazów w formacie base64

Question

Tło:

Zajmuję się tworzeniem webapp HTML5 dla mojej firmy, która jest w zasadzie edytor tekstu (podobny do Google Docs), która przechowuje informacje w bazie danych.

Używamy CKEditor 3 jako edytora richtext i Jquery do realizacji tego.

Wybraliśmy Google Chrome jako preferowaną przeglądarkę.

Nasza aplikacja jest obecnie w fazie testów alfa, posiada grupę 18 testerów (takich samych, którzy będą korzystać z aplikacji). Osoby te są heterogeniczne, ale prawie wszystkie z nich mają podstawowe umiejętności obsługi komputera, w większości ograniczone do MS Word i MS Excel.

.

Problem:

Większość naszych użytkowników nadal używać słowa do opracowania dokumentu, głównie ze względu na jego zdolność generowania bogate schematów. Kiedy kopiują/wklejają wygenerowaną zawartość do Chrome, obrazy są wklejane jako łącze do pliku lokalnego (automatycznie generowane przez system operacyjny w folderze users/*/temp). Oznacza to, że serwer nie może uzyskać dostępu do tych plików, a powstałe dokumenty (wygenerowane pliki PDF) nie zawierają obrazów.

.

Pytanie

Jak mogę zmusić wklejone obrazy mają być zakodowane w base64, podobne do tego, co dzieje się w Firefoksie?

.

Uwagi

Jeśli jest to możliwe „załadować” do serwera obrazu określanej jako src = „file: // C: \ coś”, który rozwiąże mój problem, jak mogę base64 zakodować ten obraz później .

Nie możemy przełączyć na firefox, ponieważ nie rozwiązuje to w pełni naszego problemu (jeśli obraz jest "wklejony" wraz z tekstem, firefox nie koduje go64) i rodzi inne problemy, takie jak poziomy pasek przewijania, który pojawia się gdy tekst jest zbyt długi, aby zmieścił się w obszarze tekstowym.

Answer 1

Tak i nie wierzę.

Możliwe jest przechwycenie zdarzenia wklejania i pobranie wklejonego obrazu jako pliku, a następnie użycie FileReader do odczytania pliku jako URI danych (kodowany PNG w wersji podstawowej 64).

Jednak wydaje się, że Word wysyła odnośnik do lokalnego pliku, który generuje wyjątek bezpieczeństwa (przynajmniej w Chrome) z powodu żądania międzydomenowego (http://... i file:///...). Jeśli chodzi o mnie, nie ma sposobu, aby uzyskać rzeczywistą zawartość takich plików lokalnych, a zawartość jest , a nie wysłana jako dane schowka.

W przypadku kopiowania "czystego" obrazu (np. Z farby) można uzyskać podstawowe dane zakodowane 64 w następujący sposób: http://jsfiddle.net/pimvdb/zTAuR/. Lub dodaj obraz jako podstawowy PNG zakodowany w formacie 64 w div: http://jsfiddle.net/pimvdb/zTAuR/2/.

div.onpaste = function(e) { 
    var data = e.clipboardData.items[0].getAsFile(); 

    var fr = new FileReader; 

    fr.onloadend = function() { 
     alert(fr.result.substring(0, 100)); // fr.result is all data 
    }; 

    fr.readAsDataURL(data); 
};