将 base64 png 数据转换为 javascript 文件对象-前端问题

Convert base64 png data to javascript file objects(将 base64 png 数据转换为 javascript 文件对象)

本文介绍了将 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 = "ZGF0YTppbWFnZS9wbmc7YmFzZTY0LA==" + 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 = "ZGF0YTppbWFnZS9wbmc7YmFzZTY0LA=="
    + btoa(oFREvent.target.result);
};
fr.readAsText(the_file, "utf-8"); // its important to specify encoding here

完整示例:http://jsfiddle.net/tTYb8/3/

这篇关于将 base64 png 数据转换为 javascript 文件对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！