js获取剪切板文字图片方法

有时候经常在网上看到网页可以读取系统粘贴板的内容，可以显示文字和图片等内容，就挺好奇的，所以就研究了一下。

基本原理

通过监听input的paste事件，获取到clipboardData内容，然后显示到页面上面。

方法实现

• html部分

<div class="paste">
	<select name="type" id="type">
		<option value="text">文本</option>
		<option value="richText">富文本</option>
		<option value="img">图片</option>
	</select>
	<input id="content" type="text" placeholder="请输入粘贴内容">
	<p>您粘贴的内容是： </p>
	<p id="view"></p>
	<div>
		测试内容：<a href="https://www.baidu.com/">https://www.baidu.com/</a>
	</div>
</div>

• css部分

.paste {
	margin: 0 auto;
	max-width: 320px;
}
select {
	width: 80px;
	height: 30px;
}
input {
	width: 225px;
	height: 25px;
}
#view {
	padding: 10px;
	border: 2px dotted pink;
}

• js部分

let type = document.querySelector('#type');
let content = document.querySelector('#content');
let view = document.querySelector('#view');
showClip(type.value, content, view);

type.addEventListener('change', function (e) {  
	let currentType = e.target.value;
	content.value = '';
	view.innerText = '';
	showClip(currentType, content, view);
})

function showClip (type, content, view) {
	content.addEventListener('paste', function (event) {  
		let clipboardData = event.clipboardData || event.originEvent.clipboardData;
		let items = clipboardData.items;
		if (type == 'text') {
			if (items.length > 0 && items[0].kind == 'string') {
				items[0].getAsString(function (e) {  
					view.innerText = e;
				})
			}
		}
		if (type == 'richText') {
			if (items.length > 0 && items[1].kind == 'string') {
				items[1].getAsString(function (e) {  
					view.innerHTML = e;
				})
			}
		}
		if (type == 'img') {
			if (items.length > 0 && items[0].kind == 'file') {
				let blob = items[0].getAsFile();
				let reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = function (e) {  
					let img = document.createElement('img');
					img.src = e.target.result;
					view.appendChild(img);
				}
			}
		}
	})
}

效果预览

• 粘贴显示文本内容
  
• 粘贴显示富文本内容
  
• 利用微信，qq等截图工具粘贴图片

好了，就介绍到这里。