Question

我有一个页面，用户可以将图像粘贴到内容可编辑的div中。当我得到图像时，src返回一个字符串。当我查看调试工具时，这就是我所看到的：

<img src="blob:http://www.example.com/3955202440-AeFf-4a9e-b82c-cae3822d96d4"/>

如何将其转换为基本64字符串？

以下是测试脚本http://jsfiddle.net/bt7BU/824/。

// We start by checking if the browser supports the 
// Clipboard object. If not, we need to create a 
// contenteditable element that catches all pasted data 
if (!window.Clipboard) {
   var pasteCatcher = document.createElement("div");
    
   // Firefox allows images to be pasted into contenteditable elements
   pasteCatcher.setAttribute("contenteditable", "");
    
   // We can hide the element and append it to the body,
   pasteCatcher.style.opacity = 0.5;
   document.body.appendChild(pasteCatcher);
 
   // as long as we make sure it is always in focus
   pasteCatcher.focus();
   document.addEventListener("click", function() { pasteCatcher.focus(); });
} 
// Add the paste event listener
window.addEventListener("paste", pasteHandler);
 
/* Handle paste events */
function pasteHandler(e) {
   // We need to check if event.clipboardData is supported (Chrome)
   if (e.clipboardData) {
      // Get the items from the clipboard
      var items = e.clipboardData.items || e.clipboardData.files;
      var itemcount = items ? items.length : 0;
      pasteArea.value = "items found:"+itemcount;
      if (itemcount) {
         // 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);
                
               // The URL can then be used as the source of an image
               createImage(source);
            }
         }
      } else {
   
       			console.log("no items found. checking input");

          // This is a cheap trick to make sure we read the data
          // AFTER it has been inserted.
          setTimeout(checkInput, 1);
       }
   // If we can't handle clipboard data directly (Firefox), 
   // we need to read what was pasted from the contenteditable element
   } else {
   
   console.log("checking input");
    
      // This is a cheap trick to make sure we read the data
      // AFTER it has been inserted.
      setTimeout(checkInput, 1);
   }
}
 
/* Parse the input in the paste catcher element */
function checkInput() {
   console.log("check input");
    
   // Store the pasted content in a variable
   var child = pasteCatcher.childNodes[0];
 
   // Clear the inner html to make sure we're always
   // getting the latest inserted content
   //pasteCatcher.innerHTML = "";
   //console.log( "clearing catcher");
   console.log(child);
    
   if (child) {
      // If the user pastes an image, the src attribute
      // will represent the image as a base64 encoded string.
      if (child.tagName === "IMG") {
         createImage(child.src);
         reader = new FileReader();
         reader.readAsDataURL(child.src);
         reader.loadend = function(e) {
         		console.log(e.target.result);
         }
      }
   }
}
 
/* Creates a new image from a given source */
function createImage(source) {
   var pastedImage = new Image();
   pastedImage.onload = function(e) {
      //pasteArea.text = pastedImage.src;
      console.log(1);
      console.log(e);
      loadImage.src = e.target.src;
      console.log(loadImage.src);
      
   }
   pastedImage.src = source;
}

<textarea id="pasteArea" placeholder="Paste Image Here"></textarea>
<img id="loadImage" />

我正在Mac上的Safari中测试它。

Answer 1

由于blobURI是由浏览器自动生成的，您可以使用它，将生成的图像下载为新的Blob：

UICollectionViewCell

然后在const toDataURL = url => fetch(url) .then(response => response.blob()) .then(blob => new Promise((resolve, reject) => { const reader = new FileReader() reader.onloadend = () => resolve(reader.result) reader.onerror = reject reader.readAsDataURL(blob) }))上，您可以将其称为：

function createImage(source) {

Answer 2

当您没有ES6或者想要以不同的图像类型阅读时，这个答案对于@ BrunoLM的回答是免费的。

ES6：

const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.onloadend = () => resolve(reader.result)
  reader.onerror = reject
  reader.readAsDataURL(blob)
}))

不是ES6（似乎工作原理相同）：

const toDataURL = function(url) { 
    return fetch(url).then(function(response) { 
        return response.blob();
    }).then(function (blob) {
        var type = blob.type;
        var size = blob.size;
        return new Promise(function(resolve, reject) {
            const reader = new FileReader();
            reader.onerror = reject;
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                return resolve(reader.result);
            }
        }
     )}
)}

基于我对ES6的理解（ES6不是ES6）：

var a = url => fetch(url)
var a = function(url) { return fetch(url) } 
var a = function(parameter) { return statement }

var b = (parameter, parameter) => { fetch(param, param) }
var b = function(foo1, foo2) => { return fetch(param, param) }

var c = url = () => resolve(reader.result)
var c = url = function() { return resolve() }

拨打电话：

toDataURL(url).then(function(dataUrl) {
    console.log("RESULT:" + dataUrl);
});

注意：
在OSX上的Safari中运行时，上述方法返回的值为“image/tiff”类型。如果您想指定其他类型，例如PNG，那么here上会有更多信息。

如何将图像src从blob字符串转换为数据URI

2 个答案: