ক্লিপবোর্ডের কার্যকারিতা থেকে আটকানো চিত্রটি কীভাবে Gmail এবং গুগল ক্রোম 12+ এ কাজ করে?

Question

আমি গুগলের একটি ব্লগ পোস্ট লক্ষ্য করেছি যে আপনি যদি ক্রোমের সর্বশেষতম সংস্করণটি ব্যবহার করেন তবে ক্লিপবোর্ড থেকে চিত্রগুলিকে সরাসরি একটি জিমেইল বার্তায় আটকানোর দক্ষতার কথা উল্লেখ করা হয়। আমি এটি আমার Chrome এর সংস্করণ (12.0.742.91 বিটা এম) দিয়ে চেষ্টা করেছি এবং এটি নিয়ন্ত্রণ কী বা প্রসঙ্গ মেনু ব্যবহার করে দুর্দান্ত কাজ করে।

সেই আচরণ থেকে আমার ধরে নেওয়া দরকার যে ক্রোমে ব্যবহৃত ওয়েবকিটের সর্বশেষতম সংস্করণ জাভাস্ক্রিপ্ট পেস্ট ইভেন্টে চিত্রগুলি নিয়ে কাজ করতে সক্ষম হয়েছে, তবে আমি এই জাতীয় বর্ধনের কোনও রেফারেন্স সনাক্ত করতে অক্ষম। আমি বিশ্বাস করি যে জিরো ক্লিপবোর্ডগুলি এর ফ্ল্যাশ কার্যকারিতা ট্রিগার করতে কীপ্রেস ইভেন্টগুলিকে আবদ্ধ করে এবং যেমন প্রসঙ্গ মেনুতে কাজ করে না (এছাড়াও, জিরো ক্লিপবোর্ড ক্রস-ব্রাউজার এবং পোস্টটি বলে যে এটি কেবল ক্রোমের সাথে কাজ করে)।

সুতরাং, কীভাবে এটি কাজ করে এবং যেখানে ওয়েবকিট (বা ক্রোম) -এ কার্যকারিতা সক্ষম করে সেখানে বর্ধন করা হয়েছিল?

Comments

মনে হচ্ছে এটি ফায়ারফক্সের সাথেও এলোমেলোভাবে কাজ করে। কেউ কি জানেন যে এটি ফায়ারফক্সের সাথে সমর্থন করার কথা?

— সাবস্টিয়ান

Answer 1

আমি এটি নিয়ে কিছু সময় ব্যয় করেছি। এটি নতুন ক্লিপবোর্ডের এপিআই অনুমানটিকে অনুসরণ করে চলেছে বলে মনে হচ্ছে । আপনি একটি "পেস্ট" ইভেন্ট হ্যান্ডলারটি সংজ্ঞায়িত করতে পারেন এবং ইভেন্ট ক্লিপবোর্ডডেটা.আইটিএমগুলিতে দেখতে পারেন এবং একটি ব্লব পেতে তাদের উপর getAsFile () কল করতে পারেন। আপনার একবার ব্লব হয়ে গেলে আপনি তাতে ফাইলআরডার ব্যবহার করতে পারেন এতে কী আছে তা দেখতে। আপনি স্রেফ 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);
    }
  }
}

আপনার একবার ডেটা ইউআরএল হয়ে গেলে আপনি পৃষ্ঠায় চিত্রটি প্রদর্শন করতে পারেন। পরিবর্তে আপনি যদি এটি আপলোড করতে চান তবে আপনি রিডএএসবাইনারিস্ট্রিং ব্যবহার করতে পারেন, বা আপনি ফর্মডেটা ব্যবহার করে একটি এক্সএইচআরতে রাখতে পারেন ।

Comments

এখানে স্ট্রগুলিতে আটকে রয়েছে, তবে কোনও ধারণা কেন ইভেন্টক্লিপডোডা.সাইটগুলি সাফারি 5.1-তে 'অপরিজ্ঞাত' বলে মনে হচ্ছে? বা সাফারিতে কোনও ফাইল / ব্লবের ক্লিপবোর্ডের সামগ্রীগুলি কীভাবে পাবেন? ক্রোমে দুর্দান্ত কাজ করে। আপনি ভেবেছিলেন ওয়েবকিট ওয়েবকিট হবে :(

— গ্যাভিন গিলমোর

@ স্যানিকাগনজালেজ এর কারণ তথ্য কেবল ইভেন্টের সময়কালের জন্য বিদ্যমান। ইভেন্টের পরে, এটি শেষ হয়ে গেছে, সুতরাং যখন আপনি পরিদর্শকের মধ্যে বিষয়টি খোলার চেষ্টা করবেন তখন আপনি কিছুই দেখতে পাবেন না।

— নিক রেটাল্যাক

আমি এটি ফায়ারফক্সে চালাই এবং var ব্লব = আইটেম [0] .getAsFile () প্রকারের ত্রুটি: আইটেমগুলি অপরিবর্তিত

— chinna_82

আপনি কীভাবে সেই চিত্রের ডেটা দিয়ে একটি এক্সএমএলএইচটিপিআরকোস্ট জমা করবেন তা উদাহরণ তৈরি করতে আপত্তি করবেন? এটি আসল সুন্দর হবে: ডি

— পোয়েট্রয়ে

XMLHttpRequest ব্যবহার করে আপনি এটি কীভাবে জমা দিতে পারেন তা এখানে কার্যকর করার পরে আমি এটি একটি ব্লগে লিখেছিলাম: blog.securevideo.com/2013/11/27/…

— জেটি টেলর

Answer 2

নিকের উত্তরটি এখনও কাজ করার জন্য ছোট পরিবর্তন দরকার বলে মনে হচ্ছে :)

// 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/

সুতরাং নিক উত্তরের পরিবর্তনগুলি ছিল:

var items = event.clipboardData.items;

প্রতি

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

এছাড়াও আমাকে আটকানো আইটেমগুলি থেকে দ্বিতীয় উপাদানটি নিতে হয়েছিল (প্রথমটি আপনি টেক্সট / এইচটিএমএল বলে মনে করেন যদি আপনি অন্য ওয়েব পৃষ্ঠা থেকে বাফারে কোনও চিত্র অনুলিপি করেন)। সুতরাং আমি পরিবর্তন

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

চিত্রযুক্ত আইটেমটি অনুসন্ধান করতে একটি লুপে (উপরে দেখুন)

আমি কীভাবে নিকের উত্তরের সরাসরি উত্তর দিতে জানতাম না, আশা করি এটি এখানে ভাল আছে: $ :)

Comments

XMLHttpRequest হিসাবে কীভাবে আমরা চিত্রের ডেটা জমা করব?

— পোট্রোয়ে

: এই পড়া অন্যদের কাছে, এই প্রশ্নের উত্তর এখন অন্তর্ভুক্ত করা যেতে পারে stackoverflow.com/questions/18055422/... :)

— robintibor

আমি বুঝতে পারছি না। আমি যখন ব্রাউজারে ফাইলগুলি পেস্ট করি তখন clipboardData.itemsগুগল ক্রোমে সর্বদা খালি থাকে (ফায়ারফক্স কাজ করে)। ক্রোমের এখন প্রায় যতটা অপ্টিমাইজেশন প্রয়োজন IE এর আগে used

— টোমা জ্যাটো - মনিকা

ছোট সম্পাদনা: যদি (ব্লব! = নাল) {(বা

— সূচনাতে

event.clipboardData.itemsসর্বশেষতম ক্রোমে আমার জন্য সূক্ষ্মভাবে কাজ করেছেন, নিশ্চিত হন না কখন event.originalEvent...কার্যকর হয়?

— রুবেন মার্টিনেজ জুনিয়র 21

Answer 3

পুরো চুক্তিটি গুছিয়ে নেওয়ার জন্য এখানে একটি মসৃণ jQuery প্লাগইন রয়েছে (মূলত নিকের উত্তর হিসাবে একই নীতিগুলি ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

এটি একটি লাইভ ডেমো, টীকাযুক্ত উত্স কোড এবং সমস্ত কিছু পেয়েছে।

Answer 4

ওয়েব ব্রাউজারগুলি এগিয়ে চলেছে। আমি সম্প্রতি এটি খুঁজে পেয়েছি:

কোড স্নিপেট - জাভাস্ক্রিপ্ট সহ ক্লিপবোর্ড চিত্রগুলি অ্যাক্সেস করা

এবং এই:

আটকান বর্জ্যভূমি (বা, কেন অনপাস্ট ইভেন্টটি গোলযোগ)

প্রথম লিঙ্কটি কেবল ফায়ারফক্স এবং ক্রোমে জাভাস্ক্রিপ্ট ব্যবহার করে ক্লিপবোর্ড চিত্রগুলি পাওয়ার একটি উপায় বর্ণনা করে। দ্বিতীয় লিঙ্কটিতে একটি পোস্টস্ক্রিপ্ট রয়েছে যা উল্লেখ করে যে একই কৌশলটি আইইয়ের সাথে অভিযোজিত হয়েছিল (অজানা সংস্করণ)।

Comments

ফায়ারফক্স এমনকি সম্পাদনা | সক্রিয় করে না আমার জন্য মেনু আইটেম আটকান, তাই আমি ফায়ারফক্সে এটি কীভাবে কাজ করে তা দেখতে পাচ্ছি না।

— পোস্টারপশন

মন্তব্যগুলির সময় সেই লিঙ্কগুলির কোনওটিই কাজ করে না।

— ক্রেজিওয়াকো

Answer 5

যতদুর আমি জানি -

এইচটিএমএল 5 বৈশিষ্ট্য (ফাইল এপি এবং সম্পর্কিত) - ক্লিপবোর্ড চিত্রের ডেটা অ্যাক্সেস করা এখন প্লেইন জাভাস্ক্রিপ্টের সাহায্যে সম্ভব।

তবে এটি IE (আই 10 এর চেয়ে কম কিছু) এ কাজ করতে ব্যর্থ। IE10 সমর্থন সম্পর্কেও বেশি কিছু জানেন না।

আই আই এর জন্য যে অপ্টেনগুলি আমি বিশ্বাস করি তা 'ফ্যালব্যাক' বিকল্পগুলি হয় অ্যাডোবের এআইআর এপিআই ব্যবহার করছে বা একটি স্বাক্ষরিত অ্যাপলেট ব্যবহার করছে

Answer 6

বাহ, এটা দুর্দান্ত। আমি এখনও এটি সনাক্ত করার জন্য জিমেইল উত্সে ডুব দিইনি (আমি ড্র্যাগ-আউট কার্যকারিতাটি দিয়েছিলাম) তবে আমি অনুমান করছি যে এটি ক্রম ইতিমধ্যে প্রসারিত ড্রাগ / ড্রপ এপিআইয়ের একটি এক্সটেনশন। ড্রেগ-টু-ডেস্কটপ বৈশিষ্ট্যটি কীভাবে কাজ করে সে সম্পর্কে একটি শালীন রচনা আপ রয়েছে: http://www.thecssninja.com/javascript/gmail-dragout যা আপনাকে অন্ততপক্ষে সঠিক দিকে নির্দেশ করতে পারে।

Answer 7

এটি আমার প্রকল্পের জন্য কাজ করে এমন কৌণিক 2 টাইপ স্ক্রিপ্ট সহ একটি উদাহরণ থেকে। আশা করি এটি কাউকে সাহায্য করবে। যুক্তি অন্যান্য ক্ষেত্রেও একই রকম।

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

এখানে একটি সরাসরি বাস্তবায়ন:

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

Comments

আপনি দয়া করে কোন প্রক্রিয়াটি অনুসরণ করেছিলেন তা ব্যাখ্যা করতে পারেন? আপনি https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.tsক্রোমটিতে লিঙ্কটি খুলতে পারেন এবং তারপরে যেকোন ওয়েবসাইট থেকে কোনও ছবিতে ডান ক্লিক করতে পারেন । তারপরে প্রদত্ত টেক্সটবক্সে এটি পেস্ট করুন। এটি যেভাবে কাজ করা উচিত।

— সন্দীপ কে নায়ার

ওয়েব চিত্র কাজ থেকে অনুলিপি করা। আমি উইন্ডোজ এক্সপ্লোরার থেকে চিত্র চেষ্টা করেছি, যে কারণে এটি তখন কাজ করে না। উইন্ডোজ এক্সপ্লোরার থেকে অনুলিপি করা ছবিটি ওয়েবপৃষ্ঠায় আটকানোর কোনও উপায় আপনি কী জানেন?

— ব্যাটাল হক

আমি এই বিকল্পটি এখনও চেষ্টা করে দেখিনি। আশা রাখি, আপনি পরিবর্তে লাইব্রেরি থেকে অর্ন্তদৃষ্টি পেতে পারেন https://github.com/layerssss/paste.js/, https://github.com/JoelBesada/pasteboard। এই লিঙ্কগুলিতে ডেমো উপলব্ধ রয়েছে যা আপনি চেষ্টা করে দেখতে পারেন।

— সন্দীপ কে নায়ার

ইভেন্টক্লিপবোর্ডডেটা খালি থাকে যখন আমি উইন্ডোজ অপারেটিং সিস্টেম মেশিনে ছবিটি পেস্ট করেছি any কেহ ব্যাখ্যা করতে পারে কেন এটি ঘটে?

— টুনে দোয়ান