특정 웹 사이트의 입력 상자가 스크린 샷 및 페이스트 기능을 지원하는 것을 보았고, 흥미로운 것을 알았으므로 코드를 파고 공유했습니다.
불행히도, 더 높은 버전의 Chrome 브라우저 만 직접 붙여 넣기를 지원하고 다른 브라우저는 지금까지 붙여 넣을 수 없었습니다 (IE11은 테스트되지 않았습니다). 물론이 향상된 사용자 경험 기능은 아무 것도 아닌 것보다 낫습니다.
입력 상자의 구조 코드 :
코드 사본은 다음과 같습니다.
<입력 유형 = "text"id = "testInput" />
입력 상자의 페이스트 이벤트 바인드 :
코드 사본은 다음과 같습니다.
var input = document.getElementById ( 'testInput');
input.addeventListener ( 'paste', function (event) {
// dosomething ...
});
이벤트를위한 이벤트 인터페이스 객체는 클립 보드 다타 인터페이스를 제공하여 시스템 클립 보드에 데이터를 저장합니다. 위에서 언급했듯이 크롬 브라우저의 더 높은 버전 만 시스템 클립 보드의 데이터에 직접 액세스 할 수 있습니다. 스크린 샷 후 웹 페이지에서 직접 상호 작용하기 위해 클립 보드에 저장된 사진의 입구가 제공됩니다.
여기에 언급 된 스크린 샷은 QQ에서 제공하는 스크린 샷 또는 시스템에서 제공하는 PRTSCN 키의 스크린 샷 기능 또는 다른 타사 소프트웨어가 제공하는 스크린 샷 기능입니다.
코드 사본은 다음과 같습니다.
input.addeventListener ( 'paste', function (event) {
// 이벤트 객체에 추가 된 시스템 클립 보드에 액세스하는 인터페이스
var clipboarddata = event.clipboardData,
i = 0,
항목, 항목, 유형;
if (clipboarddata) {
항목 = ClipboardData.Items;
if (! 항목) {
반품;
}
항목 = 항목 [0];
// 클립 보드에 저장된 데이터 유형
type = clipboarddata.types || [];
for (; i <types.length; i ++) {
if (types [i] === 'files') {
항목 = 항목 [i];
부서지다;
}
}
// 사진 데이터인지 확인하십시오
if (item && item.kind === 'file'&& item.type.match (/^image /// i)) {
// 사진을 읽습니다
Imgreader (항목);
}
}
});
클립 보드에서 이미지 데이터를 얻은 후 FilereAder를 사용하여 읽을 수 있습니다.
코드 사본은 다음과 같습니다.
var imgreader = function (항목) {
var file = item.getasfile (),
Reader = New Filereader ();
// 파일을 읽으면 웹 페이지에 표시됩니다.
reader.onload = function (e) {
var img = new Image ();
img.src = e.target.result;
document.body.appendChild (IMG);
};
// 파일을 읽습니다
reader.readasdataurl (파일);
};
매우 짧은 코드가 구현되면 다음 소스 코드를 사용하여 데모를 볼 수 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en-us">
<헤드>
<meta charset = "utf-8">
<title> ClipboardData를 사용하여 웹 페이지에서 스크린 샷 및 붙여 넣기 기능을 구현하십시오 </title>
<스타일 유형 = "텍스트/CSS">
#box {너비 : 200px; 높이 : 200px; 국경 : 1px Solid #ddd; }
</스타일>
</head>
<body>
<H1> 클립 보드 데이터를 사용하여 웹 페이지에서 스크린 샷 및 붙여 넣기 기능을 구현하십시오 </h1>
<hr />
<div> <입력 유형 = "text"id = "testinput"placeholder = "스크린 샷 이후 입력 상자에 붙여 넣기"size = "30" /> < /div>
<script type = "text/javaScript">
(기능(){
var imgreader = function (항목) {
var blob = item.getasfile (),
Reader = New Filereader ();
reader.onload = function (e) {
var img = new Image ();
img.src = e.target.result;
document.body.appendChild (IMG);
};
reader.readasdataurl (blob);
};
document.getElementById ( 'testInput') .adeventListener ( 'paste', function (e) {
var clipboarddata = e.clipboarddata,
i = 0,
항목, 항목, 유형;
if (clipboarddata) {
항목 = ClipboardData.Items;
if (! 항목) {
반품;
}
항목 = 항목 [0];
type = clipboarddata.types || [];
for (; i <types.length; i ++) {
if (types [i] === 'files') {
항목 = 항목 [i];
부서지다;
}
}
if (item && item.kind === 'file'&& item.type.match (/^image /// i)) {
Imgreader (항목);
}
}
});
}) ();
</스크립트>
</body>
</html>