क्लिपबोर्ड कार्यक्षमता से पेस्ट छवि जीमेल और Google क्रोम 12+ में कैसे काम करती है?

148

मैंने Google के एक ब्लॉग पोस्ट पर ध्यान दिया है जिसमें क्लिपबोर्ड से सीधे जीमेल संदेश में छवियों को चिपकाने की क्षमता का उल्लेख है यदि आप क्रोम के नवीनतम संस्करण का उपयोग कर रहे हैं। मैंने क्रोम के अपने संस्करण (12.0.742.91 बीटा-एम) के साथ यह कोशिश की और यह नियंत्रण कुंजी या संदर्भ मेनू का उपयोग करके बहुत अच्छा काम करता है।

उस व्यवहार से मुझे यह मानने की आवश्यकता है कि क्रोम में उपयोग किए गए वेबकिट का नवीनतम संस्करण जावास्क्रिप्ट पेस्ट इवेंट में छवियों से निपटने में सक्षम है, लेकिन मैं इस तरह की वृद्धि के किसी भी संदर्भ का पता लगाने में असमर्थ रहा हूं। मेरा मानना है कि ZeroClipboard अपनी फ़्लैश फंक्शनलिटी को ट्रिगर करने के लिए कीपर इवेंट्स से जुड़ता है और जैसा कि संदर्भ मेनू के माध्यम से भी काम नहीं करेगा (यह भी, ZeroClipboard क्रॉस-ब्राउज़र है और पोस्ट कहता है कि यह केवल क्रोम के साथ काम करता है)।

तो, यह कैसे काम करता है और जहां वेबकिट (या क्रोम) को बढ़ाया गया था जो कार्यक्षमता को सक्षम करता है?

— एमिल लिर्च
स्रोत

3

ऐसा लगता है कि यह फ़ायरफ़ॉक्स के साथ-साथ बेतरतीब ढंग से काम करता है। किसी को पता है कि क्या यह फ़ायरफ़ॉक्स के साथ समर्थित माना जाता है?

— सेबास्टियन

231

मैंने इसके साथ कुछ समय बिताया। ऐसा लगता है कि नए क्लिपबोर्ड एपीआई कल्पना का पालन करना चाहिए । आप एक "पेस्ट" ईवेंट हैंडलर को परिभाषित कर सकते हैं और ईवेंट को देख सकते हैं। एक बार आपके पास ब्लॉब होने के बाद, आप इसमें क्या है, यह देखने के लिए उस पर FileReader का उपयोग कर सकते हैं । यह वह है जो आप Chrome में चिपके सामान के लिए डेटा url प्राप्त कर सकते हैं:

// 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);
    }
  }
}

एक बार आपके पास डेटा url होने के बाद आप पृष्ठ पर चित्र प्रदर्शित कर सकते हैं। यदि आप इसके बजाय इसे अपलोड करना चाहते हैं, तो आप readAsBinaryString का उपयोग कर सकते हैं, या आप फॉर्मडाटा का उपयोग करके इसे एक्सएचआर में डाल सकते हैं ।

— निक रिटलैक
स्रोत

6

यहाँ तिनके पर झूलना, लेकिन किसी भी विचार क्यों event.clipboardData.items सफारी 5.1 में 'अपरिभाषित' लगता है? या यहां तक कि सफारी में एक फ़ाइल / ब्लॉब के लिए क्लिपबोर्ड सामग्री कैसे प्राप्त करें? क्रोम में महान काम करता है। आपको लगता है कि वेबकिट वेबकिट होगी :(

— गेविन गिल्मर

7

@SenicaGonzalez क्योंकि डेटा केवल घटना की अवधि के लिए मौजूद है। घटना के बाद, यह चला गया है, इसलिए जब आप निरीक्षक में ऑब्जेक्ट को फ्लिप करने की कोशिश करते हैं तो आपको कुछ भी नहीं दिखाई देगा।

— निक रिटलैक

3

मैं इसे फ़ायरफ़ॉक्स पर चलाता हूं और var blob = items [0] .getAsFile () फेंक TypeError: आइटम अपरिभाषित है

— chinna_82

2

क्या आप एक उदाहरण बना रहे हैं कि उस छवि डेटा के साथ XMLHttpRequest कैसे सबमिट करें? यह वास्तविक अच्छा होगा: D

— poitroae

1

यहां बताया गया है कि आप XMLHttpRequest का उपयोग करके कैसे सबमिट कर सकते हैं, मैंने इसे लागू करने के बाद एक ब्लॉग में लिखा था: blog.securevideo.com/2013/11/27/…

— JT Taylor

56

निक द्वारा जवाब अभी भी काम करने के लिए छोटे बदलाव की जरूरत है :)

// 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);
  }
}

उदाहरण के लिए कोड चलाना: http://jsfiddle.net/bt7BU/225/

तो nicks जवाब के परिवर्तन थे:

var items = event.clipboardData.items;

सेवा

var items = (event.clipboardData  || event.originalEvent.clipboardData).items;

इसके अलावा मुझे पेस्ट किए गए आइटम से दूसरा तत्व लेना होगा (यदि आप किसी अन्य वेब पेज से एक छवि को बफर में कॉपी करते हैं तो टेक्स्ट / html प्रतीत होता है)। इसलिए मैं बदल गया

  var blob = items[0].getAsFile();

एक लूप को छवि से युक्त आइटम मिल रहा है (ऊपर देखें)

मुझे पता नहीं था कि निक के जवाब का सीधे कैसे जवाब दिया जाए, आशा है कि यह यहाँ ठीक है: $ :)

— robintibor
स्रोत

1

हमें XMLHttpRequest के रूप में छवि डेटा कैसे प्रस्तुत करना चाहिए?

— २३:३१ बजे कविता

इसे पढ़ने वाले अन्य लोगों के लिए, इस प्रश्न का उत्तर अब वहां शामिल हो सकता है: stackoverflow.com/questions/18055422/… :)

— रॉबिनटीबोर

4

मुझे समझ नहीं आ रहा है। जब मैं ब्राउज़र में फ़ाइलों को पेस्ट करता हूं, तो clipboardData.itemsGoogle क्रोम (फ़ायरफ़ॉक्स काम करता है) में हमेशा खाली होता है। IE के लिए उपयोग किए जाने वाले क्रोम को अब लगभग अनुकूलन की आवश्यकता है।

— टॉम ज़ातो -

1

छोटा संपादित करें: यदि (बूँद! = अशक्त) {(या आरम्भ में बूँद = अशक्त) सेट करें

— पैनकेको

1

event.clipboardData.itemsनवीनतम क्रोम पर मेरे लिए ठीक काम किया, सुनिश्चित नहीं है कि कब event.originalEvent...उपयोगी है?

— रूबेन मार्टिनेज जूनियर।

25

यहाँ एक संपूर्ण jQuery प्लगइन पूरे सौदे को लपेट रहा है (मूल रूप से निक के उत्तर के समान सिद्धांत ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

इसे एक लाइव डेमो, एनोटेट स्रोत कोड और सब कुछ मिला है।

— डैनियल एक्स मूर
स्रोत

5

वेब ब्राउजर आगे मार्च करते रहते हैं। मुझे हाल ही में यह मिला:

कोड स्निपेट - जावास्क्रिप्ट के साथ क्लिपबोर्ड छवियाँ एक्सेस करना

और इस:

पेस्ट बंजर भूमि (या, क्यों onPaste घटना एक गड़बड़ है)

पहला लिंक केवल फ़ायरफ़ॉक्स और क्रोम पर जावास्क्रिप्ट का उपयोग करके क्लिपबोर्ड छवियों को प्राप्त करने का एक तरीका बताता है। दूसरे लिंक में एक पोस्टस्क्रिप्ट है जिसमें उसी तकनीक का उल्लेख किया गया है जिसे IE (अज्ञात संस्करण) में अनुकूलित किया गया था।

— अमीर अपोडका
स्रोत

फ़ायरफ़ॉक्स भी संपादन को सक्रिय नहीं करता है | मेरे लिए मेनू आइटम पेस्ट करें, इसलिए मैं यह नहीं देखता कि यह फ़ायरफ़ॉक्स में कैसे काम करता है।

— पॉडपर्सन

उन लिंक में से कोई भी टिप्पणी करने के समय काम नहीं करता है।

— क्रेजीवाको

2

जहाँ तक मुझे पता है -

एचटीएमएल 5 सुविधाओं (फाइल एपी और संबंधित) के साथ - क्लिपबोर्ड छवि डेटा तक पहुंच अब सादे जावास्क्रिप्ट के साथ संभव है।

हालांकि यह IE (IE 10 से कम कुछ भी) पर काम करने में विफल रहता है। IE10 के समर्थन के बारे में भी ज्यादा जानकारी नहीं है।

IE के लिए ऑप्टिएन्स का मानना है कि मैं 'फॉलबैक' विकल्प हैं या तो Adobe के AIR api का उपयोग कर रहे हैं या एक हस्ताक्षरित एप्लेट का उपयोग कर रहे हैं

— saurshaz
स्रोत

1

वाह ये अच्छा है। मैंने इसे अभी तक जानने के लिए gmail स्रोत में गोता नहीं लगाया है (मैंने ड्रैग-आउट कार्यक्षमता के साथ किया था), लेकिन मैं अनुमान लगा रहा हूं कि यह ड्रैग / ड्रॉप एपीआई का विस्तार है जो क्रोम पहले ही बढ़ा चुका है। ड्रैग-टू-डेस्कटॉप फ़ीचर कैसे काम करता है, इस पर एक सभ्य लेखन-अप है: http://www.thecssninja.com/javascript/gmail-dragout जो आपको कम से कम सही दिशा में इंगित कर सकता है।

— मार्क कहन
स्रोत

0

यह कोणीय 2 टाइपस्क्रिप्ट के साथ एक उदाहरण से है जो मेरी परियोजना के लिए काम करता है। आशा है कि यह किसी की मदद करता है। लॉजिक अन्य मामलों के लिए भी समान है।

https://gist.github.com/sandeepsuvit/a8ba77faebba260455985504be24aef7

यहाँ एक जीवित कार्यान्वयन है:

https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts

— संदीप के नायर
स्रोत

1

क्या आप बता सकते हैं कि आपने किस प्रक्रिया का पालन किया? आप https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.tsक्रोम में लिंक खोल सकते हैं और फिर किसी भी वेब साइट से एक छवि पर राइट क्लिक कर सकते हैं। फिर इसे दिए गए टेक्स्टबॉक्स में पेस्ट करें। उस तरह से काम करना चाहिए।

— संदीप के नायर

वेब छवि कार्यों से कॉपी किया गया। मैंने विंडोज़ एक्सप्लोरर से छवियों की कोशिश की, कि तब यह काम क्यों नहीं कर रहा था। क्या आप वेबपेज पर पेस्ट करने के लिए विंडोज़ एक्सप्लोरर से कॉपी की गई छवि को संभालने का कोई तरीका जानते हैं?

— बैटल हॉक

मैंने अभी तक इस विकल्प की कोशिश नहीं की है। उम्मीद है कि आप के बजाय इन लाइब्रेरी से जानकारी प्राप्त कर सकते https://github.com/layerssss/paste.js/, https://github.com/JoelBesada/pasteboard। इन लिंक पर डेमो उपलब्ध हैं जिन्हें आप आज़मा सकते हैं।

— संदीप के नायर

Event.clipboardData खाली है जब मैंने विंडोज़ ऑपरेटिंग सिस्टम मशीनों पर छवि चिपकाई है। कोई भी समझा सकता है कि ऐसा क्यों होता है?

— तुनक डून