Jak działa funkcja wklej obraz ze Schowka w Gmailu i Google Chrome 12+?
Zauważyłem post na blogu od Google , który wspomina o możliwości wklejania obrazów bezpośrednio ze schowka do wiadomości Gmail, jeśli używasz najnowszej wersji Chrome. Próbowałem tego z moją wersją Chrome (12.0.742.91 beta-m) i działa świetnie za pomocą klawiszy sterowania lub menu kontekstowego.
Z tego zachowania muszę założyć, że najnowsza wersja webkit używana w Chrome jest w stanie poradzić sobie z obrazami w zdarzeniu Javascript paste, ale nie byłem w stanie znajdź wszelkie odniesienia do takiego ulepszenia. Wierzę, że ZeroClipboard wiąże się ze zdarzeniami klawiatury, aby uruchomić jego funkcjonalność flash i jako takie nie działa przez menu kontekstowe(również ZeroClipboard jest cross-browser I post mówi, że działa tylko z Chrome).
Więc, jak to działa i gdzie ulepszenie zostało wykonane do Webkit (lub Chrome), który umożliwia funkcjonalność?
6 answers
Spędziłem trochę czasu eksperymentując z tym. Wygląda na to, że jest zgodny z nową specyfikacją API schowka . Możesz zdefiniować "wklej" obsługę zdarzenia i spojrzeć na zdarzenie.clipboardData.elementów i wywołanie getAsFile () na nich, aby uzyskać Blob. Gdy masz obiekt Blob, możesz użyć FileReader , aby zobaczyć, co w nim jest. W ten sposób możesz uzyskać adres URL danych dla rzeczy, które właśnie wkleiłeś w Chrome:
// window.addEventListener('paste', ... or
document.onpaste = function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)}; // data url!
reader.readAsDataURL(blob);
}
}
}
Gdy masz adres URL danych, możesz wyświetlić obraz na stronie. Jeśli chcesz wgraj go zamiast tego, możesz użyć readAsBinaryString lub umieścić go w XHR używając FormData .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-07 20:26:49
Odpowiedź Nicka wydaje się potrzebować małych zmian, aby nadal działać:)
// window.addEventListener('paste', ... or
document.onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
};
reader.readAsDataURL(blob);
}
}
Przykładowy kod uruchamiający: http://jsfiddle.net/bt7BU/225/
Więc zmiany w nicks odpowiedzi były:
var items = event.clipboardData.items;
Do
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
Musiałem również wziąć drugi element z wklejonych elementów (pierwszy wydaje się być text/html, jeśli skopiujesz obraz z innej strony internetowej do bufora). Więc zmieniłem
var blob = items[0].getAsFile();
Do pętli znajdującej element zawierający obrazek (patrz wyżej)
I nie wiedzialem jak odpowiedziec bezposrednio na Nicka, mam nadzieje ze tu jest dobrze:$:)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-11 12:07:09
Oto płynny plugin jQuery zawijający całą sprawę (w zasadzie te same zasady co ODPOWIEDŹ Nicka): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
MA demo na żywo, przypisany kod źródłowy i wszystko.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:36
Przeglądarki internetowe idą naprzód. Ostatnio znalazłem to:
Fragment kodu-dostęp do zdjęć schowka za pomocą Javascript
I to:
Wasteland Paste (lub, dlaczego Zdarzenie onPaste jest bałaganem)
Pierwszy link opisuje sposób pobierania obrazów ze schowka za pomocą JavaScript tylko w Firefox i Chrome. Drugi link zawiera postscript, który wspomina, że ta sama technika została dostosowana do IE (nieznana wersja).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-21 19:28:50
Z tego co wiem -
Z FUNKCJAMI HTML 5 ( API plików i pokrewne) - dostęp do danych obrazu schowka jest teraz możliwy za pomocą zwykłego javascript.
To jednak nie działa na IE (coś mniej niż IE 10). Nie wiem zbyt wiele o obsłudze IE10.
Dla IE optiens, które moim zdaniem są opcjami "awaryjnymi" są albo za pomocą interfejsu Adobe AIR api lub używanie podpisanego apletu
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-27 13:48:05
Wow, to super. Nie zanurzyłem się w źródle Gmaila, aby go jeszcze dowiedzieć (zrobiłem to z funkcją przeciągania), ale zgaduję, że jest to rozszerzenie API przeciągania/upuszczania, które chrome już rozszerzył. Jest przyzwoity zapis o tym, jak działa funkcja przeciągania na pulpit: http://www.thecssninja.com/javascript/gmail-dragout to może przynajmniej wskazać ci właściwy kierunek.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-13 17:25:53