图片base格式转文件格式并上传，文件转base64格式

最新推荐文章于 2024-06-13 11:17:58 发布

xfxTab

最新推荐文章于 2024-06-13 11:17:58 发布

阅读量373

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_49578914/article/details/116781783

版权

笔记专栏收录该内容

57 篇文章 6 订阅

订阅专栏

本文介绍了如何将base64格式的图片转换为源文件，并提供了两个实用函数：dataURLtoFile用于base64转文件，getBase64Image则展示了如何获取并转为base64格式。涉及前端上传文件和图片处理的基础知识。

摘要由CSDN通过智能技术生成

1.通常我们使用裁剪工具裁剪图片后输出的格式为base64格式，而有时需要将图片转为源文件。

function dataURLtoFile(dataurl, filename) {//将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
      var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), 
      n = bstr.length, 
      u8arr = new Uint8Array(n);
      while(n--){
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type:mime});
    },

上传：

let param = new FormData();
  // 上传文件对象 名称file与后台控制器参数要一致
  param.append("file", imgurl);
  //请求头
  multipart/form-data

2.有特定的需求把图片文件转vase64格式的

var img = "imgurl";//imgurl 就是你的图片路径  

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, img.width, img.height);  
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
     var dataURL = canvas.toDataURL("image/"+ext);  
     return dataURL;  
}  

var image = new Image();  
image.src = img;  
image.onload = function(){  
  var base64 = getBase64Image(image);  
  console.log(base64);  
}