javascript - 如何获取 url 图像并将其转换为 blob 函数？

Question

我有approve function我需要以 blob 格式发送图像的值。检索到图片值后，我想将其转换为 blob 函数并将 blob 格式发送到approve function. 用户可以选择他们可以更新他们的标志或只使用以前的获取图片标志。我怎么做 ？以下是我尝试过的。但是我对这段代码没有运气。

为了检索图片值，我使用了 API 并将其传递给 axios get 以获取图片值。图片值作为这样的 url 传递http://localhost/images/logo/0d63a696abc2d5e_20210915125851.jpeg.webp。所以我需要获取这个值并将其转换为 blob。

出于演示目的，我将其声明为照片。

var myImage;
var myBlob;
$(document).ready(function() {
  getDetails();
  $(".chooseLogo").click(function() {
    $("#upload_logo").click();
  });

  $("#approve").click(function() {
    var logoFilename = myBlob;
    let formData = new FormData();
    formData.append('logo', logoFilename);
    for (var pair of formData.entries()) {
      console.log(pair[0] + ', ' + pair[1]);
    }

  });

});


fetch('')
  .then(res => res.blob()) // Gets the response and returns it as a blob
  .then(blob => {
    myBlob = blob;
  });


const getDetails = () => {
  //fetching data using axios get
  //get logo picture 
  // for demonstration purpose i declare it as photo
  let photo = 'http://hd.wallpaperswide.com/thumbs/beast_2-t2.jpg';

  $("#logo").append(`<img id="logo_photoViewer" src="${photo}" width="100" height="100">`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="text-center">
    <div class="form-group" id="logo"></div>
    <button type="button" class="btn btn-primary ml-4 chooseLogo">Choose logo</button>
    <input type="file" id="upload_logo" oninput="logo_photoViewer.src=window.URL.createObjectURL(this.files[0])" hidden>
  </div>
</div>

<br>

<button type="button" id="approve" name="approve" class="btn btn-success">Approve</button>

当用户单击approve button

logo, [object File]

标签： javascriptjqueryblob