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

19840人浏览 · 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')
 }

、后面用到再写