현재 Chrome 브라우저의 더 높은 버전 만 직접 붙여 넣기를 지원합니다. 다른 브라우저는 지금까지 붙여 넣을 수 없습니다. 그러나 Firefox 및 IE11 브라우저가 촬영 한 이미지는 편집 가능한 DIV에도 스크린 샷을 붙여 넣을 수 있으며 Chrome은 Clipboarddata를 사용합니다. 그러나 Firefox 및 IE11 브라우저에서는 ClipboardData를 사용하여 이미지의 Base64 데이터를 직접 얻을 수 없습니다. 자체 직접 IMG 데이터가 제공됩니다.
Complete example:
<! doctype html> <html lang = "en-us"> <head> <meta charset = "utf-8"> <title> 클립 보드 다타를 사용하여 웹 페이지에서 스크린 샷 및 페이스트 함수를 구현합니다. 높이 : 300px; 국경 : 1px Solid #ddd; } .box img {max width : 480px; 최대 높이 : 100%; Text-Align : Center;} </style> </head> <body> <div contenteditable = "true"id = "testInput"> </div> <script type = "text/javaScript"> (function () {var imgreader = function (item) {var blob = item.getasfile (), reader = new Filereader (); img.src = e.target.result. //window.clipboarddata.getData("text ") e.clipboarddata.getData ("Text/Plain ")에 따라 붙여 넣은 콘텐츠 가져 오기 Google //alert (e.clipboarddata.getData)에서 붙여 넣은 콘텐츠 GET var ClipboardData = E.ClipboardData, // eivers, init. clipberddata ( '1'). if (! } if (item && item.kind === 'file'&& item.type.match (/^image /// i)) {imgreader (item)}}; </script> </script> </body> </html>Example 2:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 문서 </title> </head> <body> <div id = "div"contenteditable = "true"> </div> </div> var div = divelementById ( 'div'); div.addeventListener ( 'paste', function (e) {if (e.clipboarddata) {for (var i = 0; i <E.clipboarddata.items.length.length; i ++) {var c = e.clipboarddata.items [i]; var f = c.getasfile (); var reader = new Filereader (); <img src = " ' + e.target.result +'> '; </script> </body> </html>구현 방법 :
방법 1 : Chrome 브라우저에서 ClipboardData를 통해 스크린 샷 이미지 데이터를 직접 얻을 수 있습니다. Ajax를 사용하여 데이터를 배경으로 전달한 다음 배경 개발로 도메인 이름으로 이미지 주소를 반환 할 수 있습니다.
방법 2 : 이미지 데이터는 Firefox와 같은 브라우저에서 직접 얻을 수 없으므로 붙여 넣을 때 Div에서 IMG 데이터를 Base64 URL 데이터로 얻은 다음 AJAX를 동일한 방법으로 사용할 수 있습니다.
방법 3 : 게시 또는 메시지 저장을 클릭 할 때 DIV에서 IMG 데이터를 Base64 URL 데이터로 얻은 다음 동시에 AJAX를 사용할 수 있습니다. 여러 사진, 루프 또는 저장 및 게시를 클릭 할 때 백엔드 개발 프로세스가 수행되며 반환 된 디스플레이 정보는 직접 처리됩니다. 이런 식으로, 우리는 Base64 URL을 주소로 바꾸면 Div의 백엔드에 의해 반환 된 도메인 이름으로 대체 할 필요가 없습니다.
방법 4 : DIV에 붙여 넣을 때 팝업 레이어가 팝업 된 다음 팝업 레이어에 스크린 샷이있는 사진 미리보기가 업로드 버튼을 확인할 수 있습니다. 업로드 버튼을 클릭하여 Ajax로 이동하여 동일한 방법과 같은 방식으로 사진을 업로드하십시오.