首页 > 解决方案 > 将图像 blob url 转换为 base64

问题描述

我有这个来自库的代码,我想将图像部分转换为 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();

标签: javascriptjquerywebviewbase64blob

解决方案


更新以纳入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();
}

推荐阅读