JavaScript中将Blob对象转换为base64

Question

JavaScript中将Blob对象转换为base64

25

我正在尝试实现一个粘贴处理程序，从用户的剪贴板获取图像。我希望它只在Google Chrome上运行，对于其他浏览器我不担心。

这是我在互联网上找到并试图适应的方法的一部分。

// 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);
                }
            }
        }

方法可行，如果我将“源”用作图像对象的src，则可以显示图像。问题在于，在Google Chrome中，图像源将类似于：

blob：http://localhost:8080/d1328e65-ade2-45b3-a814-107cc2842ef9

我需要将此图像发送到服务器，因此我想将其转换为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=
在第一段代码中，我有一个代表文件的 blob 对象。我尝试了几种方法，但是没有得到正确的表示形式。我该如何使用它来创建 base64 表示形式？

- Rafael

https://dev59.com/Kmsz5IYBdhLWcg3wy7LU - jcolebrand

https://dev59.com/5Ww15IYBdhLWcg3wu-I9 - jcolebrand

我尝试使用另一个问题中的base64编码，但是我遇到了这个错误：异常：TypeError：Object＃<Blob>没有方法'replace'也许blob类型不同，所以我不认为我的问题是重复的...因为其他答案在这种情况下无法帮助我。或者我可能错过了什么... - Rafael

我并没有说它们是重复的，我只是链接了别人遇到的其他问题，主要是为了鼓励讨论。而且因为我一点都不清楚。 - jcolebrand

哦，好的。谢谢您的帮助和时间，不幸的是，我的问题似乎与您展示的那些有些不同。 - Rafael

当然，我希望我知道该告诉你什么。 - jcolebrand

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rafael · Accepted Answer

Nick Retallack在这个页面《如何在Gmail和Google Chrome 12+中使用从剪贴板粘贴图像功能》给出了我想要的答案。

所以新的代码片段是：

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
            }
        }
    }