클립보드에서 Gmail로 이미지 붙여넣기: Chrome 12에서 수행되는 방법

클립보드에서 Gmail로 이미지를 직접 붙여넣는 기능에 대한 Google의 발표 Chrome 12를 사용하는 Gmail은 기본 메커니즘에 대한 호기심을 불러일으켰습니다. 최신 Chrome 버전을 사용함에도 불구하고 일부 사용자는 Webkit에서 이 향상된 기능이 어떻게 구현되었는지에 대한 정보를 찾을 수 없었습니다.

실험 결과 Chrome은 새로운 Clipboard API 사양을 채택한 것으로 보입니다. 이 사양을 사용하면 event.clipboardData.items 속성에 액세스할 수 있는 "paste" 이벤트 핸들러를 정의할 수 있습니다. 각 항목에 대해 getAsFile()을 호출하면 Blob 객체를 얻을 수 있습니다. 그런 다음 이 Blob에서 FileReader를 사용하여 내용을 확인할 수 있습니다.

다음은 붙여넣은 이미지에 대한 데이터 URL을 얻는 방법을 보여주는 코드 조각입니다.

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    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을 사용할 수 있게 되면 이미지를 표시할 수 있습니다. 또는 FormData 또는 readAsBinaryString을 사용하여 업로드할 수 있습니다.

JSON.stringify가 항목 목록에서 직접 작동하지 않을 수 있지만 MIME 유형은 DataTransferItem 데이터 구조를 사용하여 각 항목을 반복하여 얻을 수 있다는 점에 유의하는 것이 중요합니다. .