将图像 blob url 转换为 base64

Question

我从库中获得了这段代码，我想将图像部分转换为 base64。

但是我一直在将 blob 转换为 base64 时出错。

它是设备上托管的本地 html 文件。

      <div class="widget file-picker"><input class="ignore fake-file-input"
      placeholder="Click here to upload file. (< 5MB)" readonly=""><button class="btn-icon-only btn-reset"
      aria-label="reset" type="button"><i class="icon icon-refresh"> </i></button><a
      class="btn-icon-only btn-download" aria-label="download"
      download="image-1562651713366.jpg389038873-13_55_28.jpg"
      href="blob:file:///3efb6b21-718c-48d2-8fa1-f59520228804"><i class="icon icon-download"> </i></a>
    <div class="file-feedback "></div>
    <div class="file-preview"><img src="blob:file:///3efb6b21-718c-48d2-8fa1-f59520228804"></div>
  </div>

这是将 img 转换为 base64 的示例代码。它似乎不适用于 blob url。

var someimage = $(".file-preview").find("img");
var canvas = document.createElement("canvas");
canvas.width = someimage.width;
canvas.height = someimage.height;
canvas.getContext("2d").drawImage(someimage, 0, 0);
dataURI = canvas.toDataURL();

Answer 1

已更新以纳入来自 Rory McCrossan

的评论

等待图像加载并注意 someimage 是一个 jQuery 对象

var someimage = $(".file-preview").find("img");
someimg.on("load", function () { 
    var canvas = document.createElement("canvas");
    canvas.width = someimage.width;
    canvas.height = someimage.height;
    canvas.getContext("2d").drawImage(someimage[0], 0, 0);
    dataURI = canvas.toDataURL();
}

将图像 blob url 转换为 base64

Converting image blob url to base64

javascript

jquery

base64

blob

webview