2024-05-17 图片url转化成base64

// 图片url转为base64格式
 const toBase64 = (imgUrl) => {
      return new Promise((resolve, reject) => {
        const image = new Image();
        // 设置图片的跨域属性为匿名
        image.setAttribute('crossOrigin', 'anonymous')
        // 当图片加载完成时执行
        image.onload = () => {
          // 创建一个 canvas 元素
          const canvas = document.createElement('canvas')
          // 设置 canvas 的宽度为图片的宽度
          canvas.width = image.width;
          // 设置 canvas 的高度为图片的高度
          canvas.height = image.height;
          // 获取 canvas 的 2d 渲染上下文
          const context = canvas.getContext('2d')
          // 将图片绘制到 canvas 上
          context.drawImage(image, 0, 0, image.width, image.height)
          // 设置图片的质量为 0.8
          const quality = 0.8;
          // 将 canvas 转换为 base64 编码的字符串
          const base64 = canvas.toDataURL('image/jpeg', quality)
          // 返回 base64 编码的字符串
          resolve(base64); // 返回 base64 编码的字符串
        };
        // 当图片加载出错时执行
        image.onerror = (error) => {
          // 更健壮的错误处理，检查 error.message 是否存在
          // 更健壮的错误处理，检查error.message是否存在
          const errorMessage = error.message || 'An error occurred while loading the image.';
          // 抛出错误，并附带错误信息
          reject(new Error(`Image loading failed: ${errorMessage}`))
        }
        // 设置图片的源地址，并添加时间戳防止缓存
        image.src = `${imgUrl}?time=${new Date().valueOf()}`
      })
    }

    // 使用示例，增加错误处理
    toBase64("http://192.168.1.100:8883/src/assets/logo/logo.png")
      .then(base64 => {
        // 使用 base64 编码的图片
        console.log(base64, "图片base64");
      })
      .catch(error => {
        console.error('Error loading image:', error);
        // 可以在这里进行更详细的错误处理，比如显示错误提示给用户
      });