클립 보드 기능의 붙여 넣기 이미지는 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의 답변 과 동일한 원칙)을 래핑하는 매끄러운 jQuery 플러그인입니다 . http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

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

웹 브라우저는 계속 전진하고 있습니다. 나는 최근에 이것을 발견했다 :

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

이:

Paste Wasteland (또는 onPaste 이벤트가 엉망인 이유)

첫 번째 링크는 Firefox 및 Chrome에서만 JavaScript를 사용하여 클립 보드 이미지를 얻는 방법을 설명합니다. 두 번째 링크에는 동일한 기술이 IE (알 수없는 버전)에 적용되었음을 언급하는 포스트 스크립트가 포함되어 있습니다.

내가 아는 한 -

HTML 5 기능 (File Api 및 관련)을 사용하면 일반 자바 스크립트로 클립 보드 이미지 데이터에 액세스 할 수 있습니다.

그러나 IE (IE 10 미만)에서는 작동하지 않습니다. IE10 지원에 대해서도 잘 모릅니다.

IE의 경우 '대체'옵션이라고 생각되는 옵티 펜은 Adobe의 AIR API를 사용하거나 서명 된 애플릿을 사용하고 있습니다.

와 멋지다. 나는 아직 그것을 알아 내기 위해 gmail 소스로 뛰어 들지 않았지만 (드래그 아웃 기능으로 했음) 크롬이 이미 확장 한 드래그 / 드롭 API의 확장이라고 생각합니다. 괜찮은 쓰기까지 드래그 - 투 - 데스크톱 기능의 작동 방법이있다 : http://www.thecssninja.com/javascript/gmail-dragout 이 올바른 방향으로 5 월 적어도 지점 당신은.

이것은 내 프로젝트에서 작동하는 angular2 typescript의 예제에서 가져온 것입니다. 그것이 누군가를 돕기를 바랍니다. 다른 경우에도 논리는 동일합니다.

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

실제 구현은 다음과 같습니다.

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