js图片转base64

可以使用HTML5的canvas元素来实现图片转base64，具体实现如下：

// 将图片转为base64格式
function imageToBase64(img) {
  // 创建canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 设置canvas的宽高和图片一致
  canvas.width = img.width;
  canvas.height = img.height;
  // 将图片绘制到canvas上
  ctx.drawImage(img, 0, 0);
  // 将canvas转换为base64格式的图片数据
  const dataURL = canvas.toDataURL('image/png');
  return dataURL;
}

// 使用示例
const img = new Image();
img.src = 'example.png';
img.onload = function() {
  const base64 = imageToBase64(img);
  console.log(base64);
}

其中，`img`为需要转换的图片对象，`base64`即为转换后的base64字符串。

相关问题

JavaScript图片转base64

可以使用canvas将图片转换为base64编码，以下是示例代码：

function convertImageToBase64(imageUrl) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      const dataURL = canvas.toDataURL('image/png');
      resolve(dataURL);
    };
    img.onerror = function() {
      reject(new Error('Failed to load image'));
    };
    img.src = imageUrl;
  });
}

// 使用示例
convertImageToBase64('https://example.com/image.png')
  .then(base64 => console.log(base64))
  .catch(error => console.error(error));

这段代码可以将指定URL的图片转换为base64编码，并返回一个Promise对象。如果图片加载失败，则会reject一个Error对象。

js 图片转base64

以下是将图片转换为Base64的JavaScript代码示例：

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  var dataURL = canvas.toDataURL("image/png");

  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

// 使用方法
var img = new Image();
img.onload = function() {
  var base64 = getBase64Image(img);
  console.log(base64);
};
img.src = "yourImage.jpg";

在这个示例中，我们创建了一个名为 `getBase64Image` 的函数，它接受一个 `img` 对象作为输入参数并返回Base64字符串。该函数使用 `canvas` 元素将图像绘制到画布上，然后使用 `toDataURL()` 方法将画布转换为Base64字符串。最后，我们删除前缀并返回Base64字符串。