รูปภาพวางจากฟังก์ชั่นคลิปบอร์ดทำงานใน Gmail และ Google Chrome 12+ อย่างไร

ฉันสังเกตเห็นโพสต์บล็อกจาก Googleที่กล่าวถึงความสามารถในการวางรูปภาพโดยตรงจากคลิปบอร์ดลงในข้อความ Gmail หากคุณใช้ Chrome เวอร์ชันล่าสุด ฉันลองสิ่งนี้กับ Chrome รุ่นที่ฉันใช้ (12.0.742.91 beta-m) และใช้งานได้ดีโดยใช้ปุ่มควบคุมหรือเมนูบริบท

จากพฤติกรรมดังกล่าวฉันต้องสมมติว่า webkit เวอร์ชันล่าสุดที่ใช้ใน Chrome สามารถจัดการกับรูปภาพในเหตุการณ์การวาง Javascript ได้ แต่ฉันไม่สามารถค้นหาการอ้างอิงถึงการปรับปรุงดังกล่าวได้ ฉันเชื่อว่าZeroClipboardเชื่อมโยงกับกิจกรรมการกดปุ่มเพื่อเรียกใช้ฟังก์ชันการทำงานของแฟลชและจะไม่ทำงานผ่านเมนูบริบท (เช่นกัน ZeroClipboard ข้ามเบราว์เซอร์และโพสต์บอกว่าใช้งานได้กับ Chrome เท่านั้น)

ดังนั้นสิ่งนี้ทำงานอย่างไรและการเพิ่มประสิทธิภาพให้กับ Webkit (หรือ Chrome) ที่ใช้งานได้อย่างไร

ฉันใช้เวลาในการทดลองกับสิ่งนี้ ดูเหมือนว่าจะเป็นไปตามข้อมูลจำเพาะคลิปบอร์ด APIใหม่ คุณสามารถกำหนดตัวจัดการเหตุการณ์ "วาง" และดูที่ event.clipboardData.items และเรียกใช้ getAsFile () บนตัวจัดการเหล่านั้นเพื่อรับ Blob เมื่อคุณมี Blob แล้วคุณสามารถใช้FileReaderเพื่อดูว่ามีอะไรอยู่ในนั้น นี่คือวิธีที่คุณจะได้รับ URL ข้อมูลสำหรับสิ่งที่คุณเพิ่งวางใน 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);
    }
  }
}

เมื่อคุณมี URL ข้อมูลแล้วคุณสามารถแสดงภาพในหน้านั้นได้ หากคุณต้องการอัปโหลดไปแทนคุณสามารถใช้ readAsBinaryString หรือคุณอาจจะใส่ลงใน XHR ใช้FormData

คำตอบโดย Nick ดูเหมือนจะต้องมีการเปลี่ยนแปลงเล็กน้อยเพื่อยังคงทำงาน :)

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

นอกจากนี้ฉันยังต้องนำองค์ประกอบที่สองจากรายการวาง (อันแรกดูเหมือนจะเป็นข้อความ / html ถ้าคุณคัดลอกภาพจากหน้าเว็บอื่นลงในบัฟเฟอร์) ดังนั้นฉันจึงเปลี่ยน

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

ไปยังลูปเพื่อค้นหารายการที่มีรูปภาพ (ดูด้านบน)

ฉันไม่รู้วิธีตอบโดยตรงกับคำตอบของ Nick หวังว่าจะใช้ได้ที่นี่: $ :)

นี่เป็น jQuery เรียบปลั๊กอินห่อจัดการทั้งหมด (พื้นหลักการเดียวกับคำตอบของนิค ): http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

มันมีการสาธิตสดซอร์สโค้ดหมายเหตุประกอบและทุกอย่าง

เว็บเบราว์เซอร์เดินหน้าต่อไป ฉันเพิ่งพบสิ่งนี้:

ข้อมูลโค้ด - การเข้าถึงรูปภาพของคลิปบอร์ดด้วย Javascript

และนี่:

The Paste Wasteland (หรือเหตุใดเหตุการณ์ onPaste จึงไม่เป็นระเบียบ)

ลิงก์แรกอธิบายวิธีรับภาพคลิปบอร์ดโดยใช้ JavaScript เฉพาะใน Firefox และ Chrome ลิงค์ที่สองมี postscript ที่กล่าวถึงเทคนิคเดียวกันนั้นได้ปรับให้เข้ากับ IE (เวอร์ชันที่ไม่รู้จัก)

เท่าที่ฉันรู้ -

ด้วยคุณสมบัติ HTML 5 (File Api และที่เกี่ยวข้อง) - การเข้าถึงข้อมูลรูปภาพคลิปบอร์ดทำได้ด้วยจาวาสคริปต์ธรรมดา

อย่างไรก็ตามสิ่งนี้ล้มเหลวในการทำงานบน IE (อะไรที่น้อยกว่า IE 10) ไม่ทราบมากเกี่ยวกับการรองรับ IE10

สำหรับ IE ตัวเลือกที่ฉันเชื่อว่าเป็นตัวเลือก 'ทางเลือก' อาจใช้ Adobe AIR ของ Adobe หรือใช้แอปเพล็ตที่ลงนามแล้ว

ว้าวมันเยี่ยมมาก ฉันยังไม่ได้ดำดิ่งลงในแหล่ง gmail เพื่อหาทาง (ฉันทำกับฟังก์ชั่นการลากออก) แต่ฉันเดาว่ามันเป็นส่วนเสริมของ API การลาก / วางที่ Chrome ได้ขยายออกไปแล้ว มีการเขียนที่ดีเกี่ยวกับวิธีการทำงานของคุณลักษณะการลากไปยังเดสก์ท็อป: http://www.thecssninja.com/javascript/gmail-dragoutซึ่งอย่างน้อยอาจชี้คุณไปในทิศทางที่ถูกต้อง

นี่คือจากตัวอย่างที่มี angular2 typescript ที่เหมาะกับโครงการของฉัน หวังว่าจะช่วยใครซักคน ลอจิกเหมือนกันสำหรับกรณีอื่นเช่นกัน

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

นี่คือการดำเนินการสด:

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