URL图片转base64使用，截图截不到的问题

 url 转 base64

原理： 利用canvas.toDataURL的API转化成base64

/**
 * 将给定的图片URL转换为Base64编码的字符串。
 * 如果图片加载成功，Promise将被解析为Base64编码的图片数据。
 * 如果图片加载失败（例如，由于跨域问题或无效的URL），Promise将被拒绝并抛出一个错误。
 * 
 * @param {string} url - 要转换的图片的URL。
 * @returns {Promise<string>} - 一个Promise对象，解析为Base64编码的图片数据，或在失败时拒绝。
 */
function urlToBase64(url) {
  // 返回一个Promise对象，用于异步处理图片加载和转换。
  return new Promise((resolve, reject) => {
    // 创建一个新的Image对象，用于加载图片。
    let image = new Image();

    // 当图片加载完成时触发此事件。
    image.onload = function() {
      // 创建一个Canvas元素，用于绘制图片并获取其Base64编码。
      let canvas = document.createElement('canvas');
      // 设置Canvas的宽度和高度与图片的自然尺寸相同。
      canvas.width = this.naturalWidth;
      canvas.height = this.naturalHeight;
      // 获取Canvas的2D绘图上下文，并将图片绘制到Canvas上。
      let context = canvas.getContext('2d');
      context.drawImage(image, 0, 0);
      // 将Canvas内容转换为Base64编码的PNG图片数据。
      let result = canvas.toDataURL('image/png');
      // 解析Promise，并将Base64编码的图片数据作为结果。
      resolve(result);
    };

    // 尝试设置图片的跨域策略为'Anonymous'，以便在可能的情况下允许跨域访问。
    // 注意：这不会总是有效，取决于图片服务器的CORS设置。
    image.crossOrigin = 'Anonymous';

    // 设置Image对象的源为传入的URL，开始加载图片。
    image.src = url;

    // 如果图片加载失败，触发此事件。
    image.onerror = function() {
      // 拒绝Promise，并抛出一个错误，表明图片加载失败。
      reject(new Error('Failed to load image for Base64 conversion.'));
    };
  });
}

// 使用示例：
// urlToBase64('https://example.com/image.jpg')
//   .then(base64Data => {
//     console.log('Base64 encoded image:', base64Data);
//   })
//   .catch(error => {
//     console.error('Error converting URL to Base64:', error);
//   });

使用：

let imgUrL = `http://XXX.jpg`j
urlToBase64(imgUrL).then(res => {
  // 转化后的base64图片地址
  console.log('base64', res)
})