Gmail과 Google Chrome 12+에서 클립보드 기능의 붙여넣기 이미지는 어떻게 작동합니까?
최신 버전의 Chrome을 사용하는 경우 클립보드에서 이미지를 Gmail 메시지에 직접 붙여넣을 수 있는 기능을 언급하는 Google의 블로그 게시물이 눈에 띄었습니다.Chrome 버전(12.0.742.91 beta-m)으로 해봤는데 컨트롤 키나 컨텍스트 메뉴를 사용하면 잘 작동합니다.
이 동작을 통해 Chrome에서 사용된 최신 버전의 웹킷이 자바스크립트 붙여넣기 이벤트의 이미지를 처리할 수 있다고 가정해야 하지만, 그러한 향상된 기능에 대한 어떠한 언급도 찾을 수 없었습니다.ZeroClipboard는 플래시 기능을 트리거하기 위해 키프레스 이벤트에 바인딩되므로 컨텍스트 메뉴를 통해 작동하지 않을 것이라고 생각합니다(또한 ZeroClipboard는 크로스 브라우저이며 게시물에는 이것이 Chrome에서만 작동한다고 나와 있습니다).
그렇다면 이 기능은 어떻게 작동하며 기능을 지원하는 웹킷(또는 Chrome)에 대한 개선이 어디에서 이루어졌을까요?
나는 이것을 실험하는데 시간을 좀 보냈습니다.새로운 클립보드 API 사양을 따르는 것 같습니다."붙여넣기" 이벤트 핸들러를 정의하고 event.clipboardData.items를 보고 여기서 getAsFile()을 호출하여 Blob을 얻을 수 있습니다.블롭이 있으면 그 위에 있는 파일 판독기를 사용하여 그 안에 무엇이 들어 있는지 확인할 수 있습니다.Chrome에 방금 붙여넣은 것에 대한 데이터 URL을 얻을 수 있는 방법은 다음과 같습니다.
document.onpaste = function (event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // might give you mime types
for (var 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에 입력할 수 있습니다.
편집: 항목이 DataTransferItem 유형입니다.JSON.stringify항목 목록에서는 작동하지 않을 수 있지만 항목을 루프오버할 때 마임 유형을 얻을 수 있습니다.
닉의 답변은 여전히 작동하려면 작은 변화가 필요할 것 같습니다 :)
// 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();
이미지가 들어 있는 항목을 찾는 루프(위 참조)
닉의 대답에 직접 대답하는 방법을 몰랐습니다. 여기가 괜찮기를 바랍니다 :)
제가 알기론..
HTML 5 기능(File Api 등 관련 기능)을 통해 일반 자바스크립트로 클립보드 이미지 데이터 접근이 가능해졌습니다.
그러나 IE(IE 10보다 작은 것)에서는 작동하지 않습니다.IE10 지원에 대해서도 잘 모릅니다.
IE의 경우 '폴백' 옵션이라고 생각되는 옵티엔스는 Adobe의 AIR api를 사용하거나 서명된 애플릿을 사용합니다.
<html><body>
<p> Right click on any image in chrome and press copy image.<br>
Press Ctrl + V to pase your image. Works on chrome </p>
<div id='MyDiv1'></div>
<script>
document.onpaste = function (event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
var blob = items[items.length - 1].getAsFile();
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (event) {
const img1 = document.createElement("img");
img1.src = event.target.result; // Appending image data to img tag
document.getElementById('MyDiv1').appendChild(img1);
}
}
</script>
</body></html>
이것을 붙여넣고 .html로 저장하면 됩니다.
언급URL : https://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c
'programing' 카테고리의 다른 글
| innoDB인지 MyISAM인지 mysql 데이터베이스의 유형을 어떻게 결정할 수 있습니까? (0) | 2023.10.12 |
|---|---|
| 제출 전 POST 매개변수 추가 (0) | 2023.10.12 |
| 실제 영상을 다운로드하는 동안 로딩 영상을 표시하는 방법 (0) | 2023.10.12 |
| 자바스크립트로 텍스트 선택 지우기 (0) | 2023.10.07 |
| listunagg 함수? (0) | 2023.10.07 |