클립 보드 기능의 붙여 넣기 이미지는 Gmail 및 Google Chrome 12 이상에서 어떻게 작동합니까?

클립 보드 기능의 붙여 넣기 이미지는 Gmail 및 Google Chrome 12 이상에서 어떻게 작동합니까?

---

최신 버전의 Chrome을 사용하는 경우 클립 보드에서 직접 Gmail 메시지에 이미지를 붙여 넣을 수있는 기능이 언급 된 Google 의 블로그 게시물을 발견했습니다 . 내 Chrome 버전 (12.0.742.91 베타 -m) 으로이 작업을 시도했으며 컨트롤 키 또는 상황에 맞는 메뉴를 사용하여 훌륭하게 작동합니다.

이 동작에서 Chrome에 사용 된 최신 버전의 웹킷이 Javascript 붙여 넣기 이벤트에서 이미지를 처리 ​​할 수 ​​있다고 가정하지만 그러한 개선에 대한 참조를 찾을 수 없습니다. 내가 믿는 ZeroClipboard의 키 누르기 이벤트에 바인딩이 플래시 기능을 트리거와 같은 할 것 컨텍스트 메뉴를 통해하지 작업 (또한, ZeroClipboard는 크로스 브라우저이고 게시물이 크롬에서만 작동 말한다).

그렇다면 어떻게 작동하고 기능을 가능하게하는 웹킷 (또는 Chrome)이 개선 되었습니까?

---

나는 이것을 실험하면서 시간을 보냈다. 새로운 Clipboard API 사양 을 따르는 것 같습니다 . "붙여 넣기"이벤트 핸들러를 정의하고 event.clipboardData.items를보고 getAsFile ()을 호출하여 Blob을 얻을 수 있습니다. Blob이 있으면 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을 사용하거나 FormData를 사용하여 XHR에 넣을 수 있습니다.

---

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;

또한 붙여 넣은 항목에서 두 번째 요소를 가져와야했습니다 (다른 웹 페이지에서 버퍼로 이미지를 복사하는 경우 첫 번째 요소는 text / html 인 것 같습니다). 그래서 나는 바꿨다

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

이미지가 포함 된 항목을 찾는 루프로 (위 참조)

나는 Nick의 대답에 직접 대답하는 방법을 몰랐다.

---

다음은 전체 거래를 마무리하는 부드러운 jQuery 플러그인입니다 (기본적으로 Nick의 답변 과 동일한 원칙 ) : http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

라이브 데모, 주석이 달린 소스 코드 및 모든 것이 있습니다.

---

웹 브라우저는 계속 전진하고 있습니다. 최근에 이것을 찾았습니다.

코드 스 니펫 — Javascript를 사용하여 클립 보드 이미지에 액세스

이:

Paste Wasteland (또는 onPaste 이벤트가 혼란스러운 이유)

The first link describes a way to get clipboard images using JavaScript only on Firefox and Chrome. The second link contains a postscript that mentions the same technique was adapted to IE (unknown version).

---

As far as I know -

With HTML 5 features(File Api and the related) - accessing clipboard image data is now possible with plain javascript.

This however fails to work on IE (anything less than IE 10). Don't know much about IE10 support also.

For IE the optiens that I believe are the 'fallback' options are either using Adobe's AIR api or using a signed applet

---

Wow, that's cool. I haven't dived into the gmail source to figure it out yet (I did with the drag-out functionality), but I'm guessing that it's an extension of the drag/drop API that chrome has already extended. There's a decent write-up on how the drag-to-desktop feature works: http://www.thecssninja.com/javascript/gmail-dragout that may at least point you in the right direction.

---

This is from an example with angular2 typescript that works for my project. Hope it helps someone. Logic is same for other cases as-well.

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

Here is a live implementation:

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

참고URL : https://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c