기본 콘텐츠로 건너뛰기

8월, 2017의 게시물 표시

웹페이지 이미지 붙여넣기 - javascript - HTML paste image into img tag, from blob data

웹페이지 이미지 붙여넣기 - javascript - HTML paste image into img tag, from blob data 말그대로... 스크린샷이던.. 뭐던 일단 복사한 이미지를 웹브라우저에 붙여넣기 기능입니다 컨트롤V 또는 붙여넣기를 사용하면 아래 onpaste 이벤트가 발동하면서 이미지 테그에 blob데이터를 사용해서 이미지를 로딩시킵니다.
이상 !

<html> <head>
<script> 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); var urlCreator = window.URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL(blob); var img = document.getElementById("image");                         img.src =imageUrl;                        …