使用Javascript：Blob对象为base64 [英] Javascript: Blob object to base64

问题描述

我想实现糊状处理程序来获取用户的剪贴板中的图像。我想这对谷歌浏览器只运行，我并不担心与其他浏览器。

这是我在网上找到了一个方法的一部分，我试图去适应它。

  //从剪贴板中的项目
VAR项目= e.clipboardData.items;
    如果（项目）{
    //循环遍历所有项目，寻找任何样的形象
        对于（VAR I = 0; I＆LT; items.length;我++）{
            如果（项目[I] .type.indexOf（图像）！== -1）{
                //我们需要重新present图像作为一个文件，
                VAR BLOB =项目[I] .getAsFile（）;
                //并使用URL或webkitUR​​L（取提供给浏览器）
                //创建一个临时URL对象
                VAR URLObj = window.URL || window.webkitUR​​L;
                无功源= URLObj.createObjectURL（BLOB）;
                的createImage（源）;
                }
            }
        }
 

该方法的工作原理，我可以显示图像，如果我用我的源作为图像对象的src。问题是，在谷歌浏览器的图像源将是这样的：斑点：HTTP：//本地主机：8080 / d1328e65-ade2-45b3-a814-107cc2842ef9

我需要把这个图像发送到服务器，所以我想将其转换为一个base64版本。例如：

<$p$p><$c$c>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=

在第一张code我有一个blob对象重新presenting文件。我如何使用它来创建一个base64再presentation？我已经尝试了一些方法，但我没有得到正确的重新presentation。

请，任何人都可以帮我吗？

解决方案

我会回答我的问题，以防万一有人来到这个页面同样的问题。

尼克Retallack的回答在本页面<一个href=\"http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c\">How确实在Gmail和谷歌Chrome剪贴板功能工作粘贴图像12+？不正是我想要的东西。

所以，code的新段子：

  VAR项目= e.clipboardData.items;
如果（项目）{
//循环遍历所有项目，寻找任何样的形象
    对于（VAR I = 0; I＆LT; items.length;我++）{
        如果（项目[I] .type.indexOf（图像）！== -1）{
            //我们需要重新present图像作为一个文件，
            VAR BLOB =项目[I] .getAsFile（）;            VAR读卡器=新的FileReader（）;
                reader.onload =函数（事件）{
                    的createImage（event.target.result）; //event.target.results包含的base64 code创建的图像。
                };
                reader.readAsDataURL（BLOB）; //从剪贴板转换的BLOB为base64
            }
        }
    }
 

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.

This is a part of a method that I found on internet and I am trying to adapt it.

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

I need to send this image to the server, so I want to convert it to a base64 version. For example:

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. How I can use it to create a base64 representation? I have tried a couple of methods but I am not getting the correct representation.

Please, anyone can help me?

解决方案

I'll answer my own question just in case someone come to this page with the same problem.

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.

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

这篇关于使用Javascript：Blob对象为base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！