剪贴板中图片转为BASE64格式

需求

将图片复制到剪贴板后，希望将图片快捷地转换为BASE64格式。
各种在线工具往往需要先将图片保存到本地，然后将本地文件上传。现在考虑将图片保存到本地这一步去掉，直接将图片从剪贴板粘贴到网页的某个元素中，网页触发粘贴事件并获取文件，然后转换并显示。

触发粘贴并转换

首先准备一个<textarea>用于粘贴图片以及显示结果。

<textarea id="result"></textarea>

然后为其添加paste事件：

document.getElementById('result').addEventListener('paste', function(e) {
    // 阻止粘贴
    e.stopPropagation();
    e.preventDefault();			 
    // 获取剪贴板信息
    var clipboardData = e.clipboardData || window.clipboardData;
	var items = clipboardData.items;
	for(var i=0; i<items.length; i++) {
		var item = items[i];
		if (item.kind == 'file') {
			var pasteFile = item.getAsFile();
			var reader = new FileReader();
			reader.onload = function(event) {
				// 将结果显示在<textarea>中
				document.getElementById('result').value = event.target.result;
			}
			// 将文件读取为BASE64格式字符串
			reader.readAsDataURL(pasteFile);
			break;
		}
	}				
})

这样，当复制一张图片到剪贴板后，选中<textarea>并按Ctrl+V粘贴，即可将剪贴板中的图片转换为BASE64格式字符串并显示在<textarea>中。

将字符串复制到剪贴板中

现在字符串已经显示在了<textarea>中，于是希望增加一个按钮，点击后会自动选中<textarea>中的所有内容并复制到剪贴板中。
首先准备一个<button>:

<button id="copy-button">结果复制到剪贴板</button>

然后为其添加onclick事件：

document.getElementById('copy-button').onclick = function() {
	var resultTextArea = document.getElementById('result');//获取对象
	resultTextArea.select();//选择
	document.execCommand("Copy");//执行复制
};

点击后即可自动选中<textarea>中的所有内容并复制到剪贴板中。

清空<textarea>

首先准备一个<button>:

<button id="clear-button">清空</button>

然后为其添加onclick事件：

document.getElementById('clear-button').onclick = function() {
	document.getElementById('result').value = '';
};

点击后即可清空<textarea>中的所有内容。

其他

1. 选择<textarea>组件有多个原因：

   • 可触发focus和paste事件。
   • 可显示大量内容。
   • 可进行选择和复制。

2. 常规截图以及微信截图都可直接粘贴，但QQ截图不行。