的Javascript：圖片爲Base64爲localStorage的

Question

目前我有這樣的代碼來設置鏈接的background-image：

$("a.link").css("background-image", "url('images/icon.png')"; 

我想提高它的圖像存儲在localStorage：

if (!localStorage.getItem("icon") { 

    iconBase64 = //How to convert my image in images/icon.png to a base64 string? 

    localStorage.setItem("icon", iconBase64); 
} 

$("a.link").css("background-image", "url(data:image/png;base64," + localStorage.getItem("icon") + ")"); 

令人難以置信的是，我找不到適合自己的解決方案......我看到了一些關於創建<canvas>或類似的東西，但我想應該有些東西更容易......不在嗎？

Answer 1

我已經使用讀取器完成此操作，但對於創建預覽的上傳文件。

var file = "icon.png"; 
var reader = new FileReader(); 
reader.onload = function (e) { 
    iconBase64 = e.target.result; 
} 
reader.readAsDataURL(file); 

但是我從來沒有嘗試過使用服務器中的文件。此外，這應該添加數據：image/png; base64已經。

Answer 2

恐怕不是。 。使用Canvas技術有一些方法可以將一個二進制的BLOB（如通過從<img>標籤的<input type="file" />但不是直接由用戶選擇的PNG

然而，是相當容易：

function getDataURL(img) { 

    var canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img, 0, 0); 
    return canvas.toDataURL(); 

} 

var dataURL = getDataURL(document.querySelector('#myimg')); 

注這一點，如果兩者的<img>和調用腳本位於同一個域（我不能演示該上的jsfiddle的原因）纔有效。

Answer 3

使用帆布或XMLHTTPRequest的+的FileReader得到dataURL。

function getImageDataURL(imgURL, callback) { 
    var img = new Image(); 
    img.onload = function(){ 
     var canvas = document.createElement('canvas'); 
     canvas.width = img.width; 
     canvas.height = img.height; 
     var ctx = canvas.getContext('2d'); 
     ctx.drawImage(img, 0, 0); 
     callback(canvas.toDataURL()); 
    }; 
    img.src = imgURL; 
} 
function getFileDataURL(fileURL, callback) { 
    var oReq = new XMLHttpRequest(); 
    oReq.onload = function (e){ 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      callback(e.target.result); //DataURL 
     }; 
     reader.readAsDataURL(e.target.response); 
    }; 
    oReq.open('get', fileURL, true); 
    oReq.responseType='blob'; 
    oReq.send(); 
} 
function setBG(dataURL){ 
    $("a.link").css("background-image", "url(data:image/png;base64," + dataURL + ")"); 
} 
function test(){ 
    var dataURL = localStorage.getItem("icon"); 
    if (!dataURL) { 
     //use getImageDataURL or getFileDataURL 
     getImageDataURL('images/icon.png', function (dataURL){ 
      localStorage.setItem("icon", dataURL); 
      setBG(dataURL); 
     }); 
    } else { 
     setBG(dataURL); 
    } 
} 
test();