blob格式图片操作JS代码片段

远程文件转Blob：response.blob() #

URL.createObjectURL(response.blob())

var imgEle = document.querySelector('img');

// 从远程加载blob
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  imgEle.src = objectURL;
});

上传组件转blob：FileReader #

文件上传组件转blob（伪上传，拦截并获取用户本地选择图片）

var imgEle = document.querySelector('img');

// 从本地加载图片blob - 通过input[type=file]选择图片文件
const inputElement = document.getElementById("logo_img_input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
    var file = inputElement.files[0];
    var reader = new FileReader();
    reader.addEventListener('loadend', (e) => {
        // e.target.result 既为blob格式的文档
        imgEle.src= e.target.result;
    });
    reader.readAsDataURL(file);
}