Convert base64 png data to javascript file objects(将 base64 png 数据转换为 javascript 文件对象)
问题描述
我有两个用 PNG 编码的 base64
,我需要使用 比较它们Resemble.JS
I have two base64
encoded in PNG, and I need to compare them using Resemble.JS
我认为最好的方法是使用 fileReader
将 PNG
转换为文件对象.我该怎么做?
I think that the best way to do it is to convert the PNG
's into file objects using fileReader
. How can I do it?
推荐答案
你可以从你的base64数据创建一个Blob
,然后读取它asDataURL
:
You can create a Blob
from your base64 data, and then read it asDataURL
:
var img_b64 = canvas.toDataURL('image/png');
var png = img_b64.split(',')[1];
var the_file = new Blob([window.atob(png)], {type: 'image/png', encoding: 'utf-8'});
var fr = new FileReader();
fr.onload = function ( oFREvent ) {
var v = oFREvent.target.result.split(',')[1]; // encoding is messed up here, so we fix it
v = atob(v);
var good_b64 = btoa(decodeURIComponent(escape(v)));
document.getElementById("uploadPreview").src = "data:image/png;base64," + good_b64;
};
fr.readAsDataURL(the_file);
完整示例(包括垃圾代码和控制台日志):http://jsfiddle.net/tTYb8/一个>
或者,您可以使用 .readAsText
,它可以正常工作,而且更优雅.. 但由于某种原因 text 听起来不对 ;)
Alternatively, you can use .readAsText
, it works fine, and its more elegant.. but for some reason text does not sound right ;)
fr.onload = function ( oFREvent ) {
document.getElementById("uploadPreview").src = "data:image/png;base64,"
+ btoa(oFREvent.target.result);
};
fr.readAsText(the_file, "utf-8"); // its important to specify encoding here
完整示例:http://jsfiddle.net/tTYb8/3/
这篇关于将 base64 png 数据转换为 javascript 文件对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:将 base64 png 数据转换为 javascript 文件对象
基础教程推荐
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01