前端实现图片转base64

最新推荐文章于 2025-07-09 13:29:07 发布

转载最新推荐文章于 2025-07-09 13:29:07 发布 · 6.3k 阅读

本文介绍了如何利用canvas和FileReader将图片转换为Base64编码格式，这种方法可用于减少HTTP请求及实现图片实时预览等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用canvas

新建个canvas标签然后用css隐藏。之后获取此canvas元素，使用toDataURL方法转换。

1 2	var canvas= document.getElementById( "xxxx"); var base64=canvas.toDataURL( "图片地址");

使用 FileReader

使用 FileReader 的 readAsDataURL 方法，读取图片并把base64数据保存到其result属性中。

     
      var reader=
      new FileReader();
     
     
      var file=fileList[
      0];
      //这里fileList是通过 File API 获取的文件数组（开启multi）
     
     
      reader.readAsDataURL(file);
     
     
      var base64=reader.result;