어떤 웹사이트의 입력란에서 스크린샷을 찍어 붙여넣는 기능을 지원하는 것을 보고 재미있다고 생각해서 코드를 꺼내서 공유해봤습니다.

안타깝게도 현재 Chrome 브라우저의 상위 버전만 이 방식으로 직접 붙여넣기를 지원하며, 다른 브라우저에서는 현재 붙여넣기를 할 수 없습니다(IE11은 테스트되지 않았습니다). 물론 이 향상된 사용자 경험 기능은 없는 것보다 낫습니다.

입력창 구조 코드:

코드 복사 코드는 다음과 같습니다.

paste 이벤트를 입력 상자에 바인딩합니다.

코드 복사 코드는 다음과 같습니다.

var input = document.getElementById( 'testInput ' );

input.addEventListener( 'paste', function( event ){
// dosomething...
});

paste 이벤트의 Event 인터페이스 객체는 시스템 클립보드에 데이터를 저장하는 clipsboardData 인터페이스를 제공합니다. 위에서 언급한 것처럼 현재 Chrome 브라우저의 상위 버전에서만 시스템 클립보드의 데이터에 직접 액세스할 수 있습니다. 이는 스크린샷을 찍고 이미지를 클립보드에 저장한 후 웹 페이지와 직접 상호 작용할 수 있는 입구를 제공합니다.

여기에 언급된 스크린샷은 QQ에서 제공하는 스크린샷이나 시스템과 함께 제공되는 PrtScn 키의 스크린샷 기능 또는 기타 타사 소프트웨어에서 제공하는 스크린샷 기능을 의미합니다.

코드 복사 코드는 다음과 같습니다.

input.addEventListener( 'paste', function ( event ) {
 // 시스템 클립보드에 접근하기 위해 이벤트 객체에 추가된 인터페이스 
 varclipboardData = event.clipboardData,
 i = 0,
 items, item, type;

 if(clipboardData ){
 items = clipsboardData.items;

 if( !items ){
 return;
 }

 item = items[0]; 
                  // 클립보드에 저장된 데이터 유형 i] === '파일' ){
                항목 = 항목[i];                              ~ 🎜> if ( item && item.kind === 'file' && item.type .match(/^image//i) ){
                                                                                       >

클립보드에서 이미지 데이터를 가져온 후 FileReader를 사용하여 읽을 수 있습니다. 

코드 복사

 코드는 다음과 같습니다.

var imgReader = function( item ){
 var file = item.getAsFile(),
 reader = new FileReader();