eightHundreds
11/13/2016 - 2:33 AM

剪贴板中图片装换成base64 https://bl.ocks.org/eightHundreds/57f0604f78c78cbf3498cd30c2264e7e

剪贴板中图片装换成base64 https://bl.ocks.org/eightHundreds/57f0604f78c78cbf3498cd30c2264e7e

index.html
content_copyfile_download
<!DOCTYPE HTML>
<html lang="en-US">

	<head>
		<meta charset="UTF-8">
		<title>利用 clipboardData 在网页中实现截屏粘贴的功能</title>
		<style type="text/css">
			#box {
				width: 200px;
				height: 200px;
				border: 1px solid #ddd;
			}
		</style>
	</head>

	<body>

		<h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1>
		<hr />
		<textarea rows="15" style="width: 100%;" id="base64Code"></textarea>
		<br />
		<img id="previewimg" />
		<script type="text/javascript">
			(function() {
				var imgReader = function(item) {
					var blob = item.getAsFile(),
						reader = new FileReader();
					var src;
					// readAsDataURL完成后将其显示在网页中
					reader.onload = function(e) {
						var preImg=document.getElementById('previewimg'),
						textA=document.getElementById('base64Code');
						preImg.src=e.target.result;
						textA.innerText=e.target.result;
					};
					// 读取文件
					var t = reader.readAsDataURL(blob);
				};
				document.addEventListener('paste', function(e) {
					// 添加到事件对象中的访问系统剪贴板的接口
					var clipboardData = e.clipboardData,
						i = 0,
						items, item, types;

					if(clipboardData) {
						items = clipboardData.items;
						if(!items) {
							return;
						}
						item = items[0];
						// 保存在剪贴板中的数据类型
						types = clipboardData.types || [];
						for(; i < types.length; i++) {
							if(types[i] === 'Files') {
								item = items[i];
								break;
							}
						}
						// 判断是否为图片数据
						if(item && item.kind === 'file' && item.type.match(/^image\//i)) {
							imgReader(item);
						}
					}
				});
			})();
		</script>
	</body>
</html>