JavaScript 剪贴板操作：获取内容及将图片转换为 Base64

本文将介绍如何使用 JavaScript 操作剪贴板，包括获取剪贴板内容以及将本地图片路径转换为 Base64 编码。

获取剪贴板内容

使用 navigator.clipboard.readText() 方法可以获取剪贴板中的文本内容。该方法返回一个 Promise，解析为剪贴板中的文本内容。

navigator.clipboard.readText()
  .then(text => {
    console.log('剪切板内容:', text);
  })
  .catch(err => {
    console.error('无法读取剪切板内容:', err);
  });

将本地图片路径转换为 Base64

要将本地图片路径转换为 Base64，可以使用 FileReader 对象及其 readAsDataURL() 方法。该方法读取文件并将其转换为 Base64 编码。

function convertToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
    reader.readAsDataURL(file);
  });
}

// 读取本地图片文件并转换为 Base64
const input = document.getElementById('file-input');
input.addEventListener('change', () => {
  const file = input.files[0];
  if (file) {
    convertToBase64(file)
      .then(base64 => {
        console.log('图片的 Base64 编码:', base64);
      })
      .catch(err => {
        console.error('转换为 Base64 时出错:', err);
      });
  }
});

代码解释:

convertToBase64 函数接受一个文件对象作为参数，并返回一个 Promise。
在函数内部，创建一个 FileReader 对象。
reader.onload 事件处理程序在文件读取完成后被调用，并将读取结果（Base64 编码）传递给 Promise 的 resolve 方法。
reader.onerror 事件处理程序在读取文件时发生错误时被调用，并将错误对象传递给 Promise 的 reject 方法。
reader.readAsDataURL(file) 方法开始读取文件并将其转换为 Base64 编码。

注意：

使用 FileReader 读取文件是一个异步操作，因此需要使用 Promise 来处理结果。
为了使代码正常工作，需要在网页中添加一个文件选择输入框，并将 id 设置为 'file-input'。