2013-07-10 5 views
1

내 웹 사이트의 클립 보드에서 이미지를 붙여 넣으려고합니다 (예 : 복사 및 붙여 넣기). 누군가가 이것에 조언 할 수 있으면 감사하십시오. HTML 5 또는 애플릿 또는 어떤 방식 으로든이 작업을 수행 할 수 있습니까? 모든 조언이나 참조 용 링크는 높이 평가됩니다.클립 보드에서 이미지 붙여 넣기

+0

* "이것을 사용하여 얻을 수 있습니까 .. 애플릿"* 예. 하지만 디지털 서명이 필요하며 사용자의 지시에 따라 신뢰할 수 있어야합니다. BTW - 이미지를 웹 사이트에 업로드해야합니다 (예 : 다른 사람들이 나중에 볼 수 있음)? –

+0

@AndrewThompson 시나리오는 내 사용자가 자신의 오류를 촬영하여 내 웹 사이트에 붙여 넣어야합니다. 그들은 페인트 또는 포토샵에 화면을 붙여 넣은 다음 이미지로 변환하고 웹 사이트에 업로드하기를 원하지 않습니다. 애플릿에 대한 참조 용 링크를 공유 할 수 있다면 감사하게 생각하십시오. 감사합니다 –

+0

[애플릿 정보. 페이지] (http://stackoverflow.com/tags/applet/info) 내가 애플릿에 대한 '최고의 링크'를 집중 시켰습니다. –

답변

1

자바 스크립트로 관리해야합니다.

자바 스크립트

if (!window.Clipboard) { 
    var pasteCatcher = document.createElement("apDiv1"); 
    pasteCatcher.setAttribute("contenteditable", ""); 
    pasteCatcher.style.opacity = 0; 
    document.body.appendChild(pasteCatcher); 
    pasteCatcher.focus(); 
    document.addEventListener("click", function() { pasteCatcher.focus(); }); 
} 

window.addEventListener("paste", onPasteHandler); 

function onPasteHandler(e) 
{ 
    if(e.clipboardData) { 
     var items = e.clipboardData.items; 
     if(!items){ 
      alert("Image Not found"); 
     } 
     for (var i = 0; i < items.length; ++i) { 
     if (items[i].kind === 'file' && items[i].type === 'image/png') { 
      var blob = items[i].getAsFile(), 
       source = window.webkitURL.createObjectURL(blob); 

      pastedImage = new Image(); 
      pastedImage.src = source; 

      pasteData(); 
      } 
     } 
    } 
} 

function pasteData() 
{ 
    drawCanvas = document.getElementById('drawCanvas1'); 
    ctx = drawCanvas.getContext('2d'); 
    ctx.clearRect(0, 0, 640,480); 
    ctx.drawImage(pastedImage, 0, 0); 
} 

DIV

<div id="apDiv1" contenteditable='true'>Paste Test</div> 
+0

Word of warning, 여러분 - IE8 이하에서는 작동하지 않습니다. Firefox 20 이상에서 작동합니다 (이전 버전에서 작동 할 수 있었는지, 확실하지 않음). Chrome. –

+0

drawCanvas = document.getElementById ('drawCanvas1'); ---> drawCanvas1은 여기에 어떤 유형의 컨트롤입니까 – hks

+0

전체 소스 코드를 공유 할 수 있습니까? – hks

0

애플릿이 서명되지 않은 경우에도 JNLP API를 사용할 수 있습니다.

ClipboardService cs = (ClipboardService)ServiceManager.lookup("javax.jnlp.ClipboardService"); 
Image c = (Image)cs.getContents().getTransferData(DataFlavor.imageFlavor); 
0
처음

, 파일 (이미지) 서버를 만드는.

그런 다음 js를 사용하여 붙여 넣기 이벤트를 수신합니다. 코드 키워드 :

addEventListener 'paste' clipboard image 

다음 파일 서버에 아약스 업로드를 사용하여. 아약스는 URL을 resp.

마지막으로 URL로 img 태그를 작성합니다.

애플릿이 오래되었습니다 ... 무시합니다.

관련 문제