Vue 图片url转base64

在Vue.js中，将图片URL转换成Base64编码通常是为了在网络请求、存储或显示本地资源时避免直接引用外部链接。你可以使用JavaScript内置的`FileReader` API来实现这个功能。以下是一个简单的示例：

function urlToBase64(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(this, 0, 0);
      const dataUrl = canvas.toDataURL('image/jpeg'); // 可视化效果最好选择'jpeg', 根据需要调整格式
      resolve(dataUrl.split(',')[1]); // 返回Base64字符串，去掉头部的"data:image/"
    };
    img.onerror = function() {
      reject('Failed to load image');
    };
  });
}

// 使用示例
this.base64Image = await urlToBase64('your-image-url.jpg');