>

자바 스크립트를 사용하여 이미지를 클립 보드에 넣는 방법 ( copy 이벤트) 브라우저에서 이미지를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 "이미지 복사"를 선택하면됩니다.

이 스크립트 는 클립 보드 내용의 세부 사항을 보여줍니다. 복사 된 이미지의 경우 다음을 인쇄합니다.

DataTransfer { dropEffect: "none", effectAllowed: "uninitialized", items: DataTransferItemList[2], types: Array[2], files: FileList[1], mozItemCount: 1, mozCursor: "auto", mozUserCancelled: false, mozSourceNode: null }
DataTransferItem { kind: "string", type: "text/html" }
DataTransferItem { kind: "file", type: "image/png" }
Array [ "text/html", "Files" ]
File { name: "image.png", lastModified: 1504122845696, lastModifiedDate: Date 2017-08-30T19:54:05.696Z, webkitRelativePath: "", size: 385273, type: "image/png" }

그래서 질문을 재구성 할 수 있습니다-파일을 clipboardData 에 첨부하는 방법   copy  이벤트 핸들러 기능?

document.addEventListener('copy', (event) => {
  // event.clipboardData.?
  // maybe event.clipboardData.setData(?)
})

데모 가 작동하지 않음/en-US/docs/Web/API/DataTransfer/setData "rel ="nofollow noreferrer "> setData() 방법.

  • 답변 # 1

    //get reference to the div
    var div = document.getElementById('someDiv');
    //attach a paste event
    div.addEventListener('paste', function(ev){
        var imgFile = null;
        var idx;
        var items = ev.clipboardData.items;
        for(idx=0;idx<items.length;idx++) {
            //check if any content is file
            if(items[idx].kind==="file") {
                //take that file to imgFile
                imgFile = items[idx].getAsFile();
                break;
            }
        }
        if(imgFile==null) {return;}
        
        //create a File reader
        var reader = new FileReader();
        reader.onload = function() {
            //create an img DOM object
            var img = new Image();
            //reader.result is nothing but the Base64 representation
            img.src = reader.result;
            
            //operate the DOM, clear the div and append the img
            div.innerHTML = '';
            div.appendChild(img);
        }
        //read that file using the reader
        reader.readAsDataURL(imgFile);
    });
    
    
    <div id="someDiv" style="min-width: 200px;min-height: 200px; border: 1px solid red">
    Paste an image here (using Ctrl + V)
    </div>
    
    

관련 자료

  • 이전 c# - 객체의 배열 목록을 확장하면 새로운 객체가됩니까?
  • 다음 asp.net - Visual Studio 2010에서 F11 키 (디버그 모드)가 작동하지 않습니까?