js图片转base64

你可以使用JavaScript中的FileReader对象将图片文件转换为base64编码。以下是一个简单的示例代码：

// 选择图片文件
const input = document.querySelector('input[type="file"]');
const file = input.files[0];

// 创建FileReader对象
const reader = new FileReader();

// 读取文件内容
reader.readAsDataURL(file);

// 在读取完成后执行
reader.onload = function() {
  // 将读取的内容赋值给img标签的src属性
  const img = document.createElement('img');
  img.src = reader.result;
  
  // 将读取的内容转换为base64编码
  const base64 = reader.result.split(',')[1];
  
  // 在此处使用base64编码
  console.log(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字符串。