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 만 검색합니다. clipboardData
IE 전용이며 문자열과 함께 작동하며 이미지를 붙여 넣으면 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
'Programing' 카테고리의 다른 글
JWT 새로 고침 토큰 흐름 (0) | 2020.09.19 |
---|---|
C # 언어 사양 6.0은 어디에서 찾을 수 있습니까? (0) | 2020.09.19 |
WCF 서비스 참조 .datasource 파일은 무엇입니까? (0) | 2020.09.19 |
x-tmpl은 무엇입니까? (0) | 2020.09.19 |
Scikit 학습의 RandomForestClassifier 대 ExtraTreesClassifier (0) | 2020.09.19 |