javascript - 将图像 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();
解决方案
更新以纳入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();
}
推荐阅读
- java - 对象未从 ArrayList 中删除
- python - 运行以下代码时出现分段错误
- mule - 缺少 Mule 文档名称
- java - 尝试获取空数组 Kotlin 的长度
- sql-server - SAP B1:如何检查 OIVL 表中是否插入了新数据
- laravel - Laravel 6.0 输入::value"old(' ')"
- visual-studio-code - 如何在vscode中设置匹配的括号颜色?
- kivy - Kivy ScreenManager 根本不做任何事情
- javascript - Javascript文本更改未在HTML“for”中修复
- java - 来自 JavaFX 桌面客户端应用程序的 RESTful API 身份验证