在 JavaScript 中将 Blob 对象转换为 base64
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11850970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blob object to base64 in JavaScript
提问by Rafael
I am trying to implement a paste handler to get an image from user's clipboard. I want this to run only on Google Chrome, I am not worried with other browsers.
我正在尝试实现一个粘贴处理程序以从用户的剪贴板中获取图像。我希望它只在 Google Chrome 上运行，我不担心其他浏览器。
This is a part of a method that I found on Internet and I am trying to adapt it.
这是我在 Internet 上找到的一种方法的一部分，我正在尝试对其进行调整。
// Get the items from the clipboard
var items = e.clipboardData.items;
if (items) {
// Loop through all items, looking for any kind of image
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
// We need to represent the image as a file,
var blob = items[i].getAsFile();
// and use a URL or webkitURL (whichever is available to the browser)
// to create a temporary URL to the object
var URLObj = window.URL || window.webkitURL;
var source = URLObj.createObjectURL(blob);
createImage(source);
}
}
}
The method works and I can show the image if I use my "source" as the src of a image object. The problem is that the image source in google chrome will be something like this: blob:http://localhost:8080/d1328e65-ade2-45b3-a814-107cc2842ef9
该方法有效，如果我使用我的“源”作为图像对象的 src，我可以显示图像。问题是谷歌浏览器中的图像源将是这样的：blob:http://localhost:8080/d1328e65-ade2-45b3-a814-107cc2842ef9
I need to send this image to the server, so I want to convert it to a base64 version. For example:
我需要将此图像发送到服务器，因此我想将其转换为 base64 版本。例如：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArgAAAAjCAIAAADwnO7RAAAKMWlDQ1BJQ0MgUHJvZmlsZQAASImdlndUU9kWh8+9N71QkhCKlNBraFICSA29SJEuKjEJEErAkAAiNkRUcERRkaYIMijggKNDkbEiioUBUbHrBBlE1HFwFBuWSWStGd+8ee/Nm98f935rn73P3Wfvfda6AJD8gwXCTFgJgAyhWBTh58WIjYtnYAcBDPAAA2wA4HCzs0IW+EYCmQJ82IxsmRP4F726DiD5+yrTP4zBAP+flLlZIjEAUJiM5/L42VwZF8k4PVecJbdPyZi2NE3OMErOIlmCMlaTc/IsW3z2mWUPOfMyhDwZy3PO4mXw5Nwn4405Er6MkWAZF+cI+LkyviZjg3RJhkDGb+SxGXxONgAoktwu5nNTZGwtY5IoMoIt43kA4EjJX/DSL1jMzxPLD8XOzFouEiSniBkmXFOGjZMTi+HPz03ni8XM...iCIBWnh+P9w9C+9eMzvhCl1iOElK09ruc2wqGhfH/uKEV30FlJkmRZJklydFuW/FdwhYFCkCBBggQJEuS/gWC4FCRIkCBBggQZlmCgECRIkCBBggQZlmCgECRIkCBBggQZFmzhwoXXWoYgQYIECRIkyHUK5vF4rrUMQYIECRIkSJDrFHLktYOCBAkSJEiQIP/NkLt3777WMgT5thLstwoSJEiQ7zxYsEUhyJWxbdu2u++++1pLESRIkCBBvl6Csx6CBAkSJEiQIMPy3dkMOsg3T7A5KkiQIEG+8wQDhSBXTjBQCBIkSJDvPMGuhyBBggQJEiTIsFwXLQr9H6bOjtYeP2mONbOj2Hut9y6/x+nlJSBCQnXkgG3Brh8Q4lqbOpAmPDqUGShex9lPDlfB4sU5I97b/8kuevygYUgYsAksAPg9fkbDQN/e1kNvVw76nfYeiTCG6sjLd5fv58rsFmxRCBIkSJDvPP8f+HtxbDVRPI8AAAAASUVORK5CYII=
In the first piece of code I have a blob object representing the file. I have tried a couple of methods but I am not getting the correct representation. How I can use it to create a base64 representation?
在第一段代码中，我有一个表示文件的 blob 对象。我尝试了几种方法，但没有得到正确的表示。我如何使用它来创建 base64 表示？
回答by Rafael
Nick Retallack's answer at this page How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?does exactly what I want.
Nick Retallack 在此页面上的回答来自剪贴板功能的粘贴图像如何在 Gmail 和 Google Chrome 12+ 中工作？正是我想要的。
So the new piece of code is :
所以新的代码是：
var items = e.clipboardData.items;
if (items) {
// Loop through all items, looking for any kind of image
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
// We need to represent the image as a file,
var blob = items[i].getAsFile();
var reader = new FileReader();
reader.onload = function(event){
createImage(event.target.result); //event.target.results contains the base64 code to create the image.
};
reader.readAsDataURL(blob);//Convert the blob from clipboard to base64
}
}
}
