本地 png 图片地址如何转base64?

/aaaaa/static/img/zhexian.41eafbf5.png 转 这种格式
data:image/png;base64,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

阅读 3.3k
5 个回答
// 把本地图片文件路径转换为 Base64 编码字符串
async function imageToBase64(imagePath) {
  const response = await fetch(imagePath);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}


imageToBase64('/aaaaa/static/img/zhexian.41eafbf5.png')
  .then((base64) => {
    console.log(base64); // 输出 Base64 编码字符串
  })
  .catch((error) => {
    console.error('Error converting image to base64:', error);
  });
新手上路,请多包涵

你的图片是用户选取的嘛
试试这样
const fileInput = document.getElementById("fileInput");

const reader = new FileReader();

fileInput.onchange = (e) => {

reader.readAsDataURL(e.target.files[0]);

}

reader.onload = (e) => {

console.log(e.target.result);

}

图片转base64方法

 getBase64(imgUrl, callback) {
      let image = new Image();
      // 解决跨域问题
      image.setAttribute("crossOrigin", "anonymous");
      let imageUrl = imgUrl;
      image.src = imageUrl;
      // image.onload为异步加载
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        // eslint-disable-next-line no-undef
        context.drawImage(image, 0, 0, image.width, image.height);
        var quality = 0.8;
        // 这里的dataurl就是base64类型
        // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png,因为压缩成png后              base64的字符串可能比不转换前的长!
        let dataurl = canvas.toDataURL("image/jpeg", quality);
        callback ? callback(dataurl) : null; //调用回调函数
      };
 }

使用:

this.getBase64('./test.img', dataURL => {
      console.log(dataURL );
 })
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏