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

一、File转Blob

MDN文档 createObjectURL
<input type="file">

<button class="btn" onclick="openFile()">点我</button>

function openFile() {
  var input = document.createElement('input');
  input.type = 'file';
  input.onchange = e => {
      var imgFile = e.target.files[0];
      var imgBlob = URL.createObjectURL(imgFile);
      console.log('imgFile',imgFile);
      console.log('imgBlob',imgBlob);
  }
  input.click();
}

二、Blob转File

MDN文档 File
使用js将blob对象转file对象

var imgBlob = Blob-<<格式图片>>
 
var imgFile = new File([imgBlob], Math.random(), {
          type: imgBlob.type,
   });

三、Blob转二进制（base64）

// 获取 img 的 dom
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');
 }

js生成文件file对象，blob和file相互转换