js图片格式转换（File、blob、二进制）

一、首先知道你要转换的编码格式：log一下就能看到：Blob：二进制File二、File转Blob// 原生<input class="ut myHide" id="uploadFile" name="uploadFile" type="file" onchange="btnUploadFile(event)" />function btnUploadFile(e){//获取图片文件v

龙雨LongYu12

21450人浏览 · 2022-02-18 14:29:51

龙雨LongYu12 · 2022-02-18 14:29:51 发布

一、首先知道你要转换的编码格式：

log一下就能看到：

Blob：

二进制

File

二、File转Blob

// 原生
<input class="ut myHide" id="uploadFile" name="uploadFile" type="file" onchange="btnUploadFile(event)" /> 

function btnUploadFile(e){
     //获取图片文件 
      var imgFile = e.target.files[0]; 
      var imgBlob = URL.createObjectURL(imgFile ); 
}

三、Blob转File(详见：使用js将blob对象转file对象_x先生的博客-CSDN博客_blob转file)

var imgBlob = Blob格式图片

var imgFile = new window.File([imgBlob], Math.random(), {
          type: imgBlob.type,
        });

四、Blob 转二进制（base64）

获取 img 的 dom，这里命名为 img

 function base64 (dom) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  canvas.width = dom.width
  canvas.height = dom.height
  ctx?.drawImage(dom, 0, 0, dom.width, dom.height)
  return canvas.toDataURL('image/png')
 }

五、二进制转blob，并下载

这是一个二进制样例，只要后端返回的文件格式是这种，就是二进制

"UEsDBBQAAAgIALykX1kxSZgR8gAAANMCAAALAAAAX3JlbHMvLnJlbHOs0kFOwzAQBdCrWN43kxaEEKrbDZvuEOICxp4kVmKPZU8gnI0FR+IKWEKCtiqhiy5t//l+i/l8/1hvJz+IF0zZUVByWdVSbVz+pvvbnFhyyG3AgXbDffkdowLrsaOnlvnzqKKyq+MJE3/zBy2cayUZruPAxmiC3WEZWAckC6c

      let base64Data = "efeQ4455bdrgregr"
  
      // 将Base64字符串转换为Uint8Array
      const byteCharacters = atob(base64Data);
      const byteNumbers = new Array(byteCharacters.length);
      for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
  
      // 创建Blob对象
      const blob = new Blob([byteArray]);
  
      // 创建URL和<a>标签以触发下载
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'output.png'; // 文件名
      a.click();
  
      // 清理资源
      window.URL.revokeObjectURL(url);

、后面用到再写