轻松玩转剪切板：File、Blob、Base64、URL 之间的数据转换指南

2023-10-27 18:14:26

1. 剪切板图片获取

在浏览器中获取剪切板图片有两种常见的方式：

使用 JavaScript API ：

navigator.clipboard.read().then((data) => {
  let items = data.items;
  for (let i = 0; i < items.length; i++) {
    if (items[i].kind === 'image') {
      // 获取剪切板中的图片
      let blob = items[i].getAsFile();
      // ... 处理剪切板中的图片 ...
    }
  }
});

使用 HTML5 Drag and Drop API ：

<div id="drop-zone" ondrop="handleDrop(event)">
  <span>将图片拖放到此区域</span>
</div>

<script>
function handleDrop(event) {
  event.preventDefault();
  let files = event.dataTransfer.files;
  for (let i = 0; i < files.length; i++) {
    let file = files[i];
    // ... 处理剪切板中的图片 ...
  }
}
</script>

2. File 与 Blob 之间的转换

File 与 Blob 都是表示二进制数据的对象，但在某些情况下，我们需要在两者之间进行转换。

File 转 Blob ：

let file = document.querySelector('input[type=file]').files[0];
let blob = new Blob([file]);

Blob 转 File ：

let blob = new Blob(['Hello, world!']);
let file = new File([blob], 'hello.txt', { type: 'text/plain' });

3. Blob 与 Base64 之间的转换

Base64 是一种二进制数据的编码方式，它可以将二进制数据转换为字符串。

Blob 转 Base64 ：

let blob = new Blob(['Hello, world!']);
let reader = new FileReader();
reader.onload = function() {
  let base64 = reader.result;
  // ... 处理 Base64 编码的二进制数据 ...
};
reader.readAsDataURL(blob);

Base64 转 Blob ：

let base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
let blob = new Blob([atob(base64)], { type: 'image/png' });

4. Blob 与 URL 之间的转换

URL 是统一资源定位器，它可以唯一地标识互联网上的资源。

Blob 转 URL ：

let blob = new Blob(['Hello, world!']);
let url = URL.createObjectURL(blob);

URL 转 Blob ：

let url = 'https://example.com/image.png';
let request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'blob';
request.onload = function() {
  let blob = request.response;
  // ... 处理 Blob 对象 ...
};
request.send();