JavaScript를 사용하여 클립 보드에서 이미지 붙여 넣기

JavaScript를 사용하여 클립 보드에서 이미지 붙여 넣기

---

자바 스크립트를 사용하여 클립 보드의 이미지를 사용자 지정 서식있는 텍스트 편집기에 어떻게 붙여 넣습니까? (ctrl + c 및 ctrl + v 또는 스냅 샷).

Ajax의 리치 텍스트 편집기를 사용한 사람이 있습니까? 클립 보드에서 Ajax RTE로 이미지를 붙여 넣을 수 있습니까?

여러분의 생각을 공유 해주세요!

감사!

---

이 질문은 여전히 ​​Google의 검색 결과에 자주 표시되기 때문에 적어도 모든 최신 브라우저 (2018)의 Google Chrome (2011) 에서는 이것이 가능하다는 점을 지적하고 싶습니다 . 그들은 GMail에서 사용하기 위해 구현했지만 모든 웹 사이트에서 사용할 수 있습니다.

클립 보드의 이미지 붙여 넣기 기능은 Gmail 및 Google Chrome 12 이상에서 어떻게 작동하나요?

---

이것은 Chrome과 Firefox에서 확실히 가능합니다. IE / Safari에 대해 잘 모르겠습니다.

imgur.com, onpaste에서 봐, 그리고 예로 pasteboard.co 및 참조 GitHub의에 대지에 대한 코드 뿐만 아니라 자신의 블로그에 조엘의 우수한 쓰기를

레코드의 경우 사용자가 요소에서 Ctrl + V를 눌러야합니다. 그런 다음에서 읽어서 붙여 넣기 이벤트 처리기 에서 데이터를 캡처 할 수 event.clipboardData있지만 하위 수준에서 작동하도록하려면 포커스가 contenteditable 요소를 비우고 거기에서 결과를 가져옵니다. 이는 Firefox 22에서 잘 작동하지 않습니다. 여기를 참조 하십시오.

---

Firefox 4와 같은 새로운 브라우저 는 인코딩 된 PNG 데이터가있는 데이터 URI 로 클립 보드의 이미지 데이터를 RTE에 붙여 넣기를 지원 합니다. 그러나 대부분의 웹 애플리케이션은 이러한 데이터 URI를 잘못 구문 분석하고 폐기합니다. 야후 메일은 제대로 처리합니다. 그러나 Gmail과 Hotmail은 그것을 버립니다. 이에 대해 Google과 Microsoft에 알 렸습니다.

---

지금은 clipboardData Object를 찾았습니다 .

그러나 클립 보드에서 텍스트 형식이나 URL 만 검색합니다. clipboardDataIE 전용이며 문자열과 함께 작동하며 이미지를 붙여 넣으면 null을 반환합니다.

테스트 예

 <form>
    <input type="text" id="context"  onClick="paste();">  
  </form>

<script type="text/javascript"> 

function paste() {  

var sRetrieveData = clipboardData.getData("Text");
document.getElementById('context').value = sRetrieveData;        

}
</script>

기본적으로 Firefox에서는 클립 보드 액세스가 활성화되지 않습니다 . 여기 에 설명이 있습니다 . 반대로 execCommand () 는 텍스트 값만 처리하고 Firefox와 호환되지 않습니다.

다른 사람들이 말했듯이 코드가 IE에서 작동한다는 사실은 보안 위험이며 모든 사이트가 클립 보드 텍스트에 액세스 할 수 있습니다.

이미지 상대 URL을 복사하는 가장 쉬운 방법은 Java 애플릿, Windows ActiveX 플러그인, .net 코드를 사용 하거나 끌어서 놓는 것입니다.

---

다른 사람들을 돕기 위해 Nick Rattalack의 답변과 함께 여기에 링크를 남겨 두겠습니다.

// window.addEventListener('paste', ... or
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);
    }
  }
}

클립 보드의 이미지 붙여 넣기 기능은 Gmail 및 Google Chrome 12 이상에서 어떻게 작동하나요?

---

안타깝게도 클립 보드의 이미지를 RTE에 붙여 넣을 수 없습니다.

이미지와 일부 텍스트가 포함 된 Microsoft Word와 같은 데스크톱 앱에서 Blob을 복사하면 이미지가 끊어진 참조로 표시되고 (비율은 정확함) 텍스트가 올바르게 붙여 넣어집니다 (서식이 손실 됨). .

The only thing that is possible is to copy an image within the RTE and paste back within the RTE.

참고URL : https://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-javascript