Base64編碼

好吧，我即將結束一個項目，我遇到了一個小小的技術問題。爲了很容易修復它，我需要一種方法來獲取javascript中的html元素並將其編碼爲base64字符串？Base64編碼

我知道這是可能的帆布 - 因爲這是我現在的工作方式，但項目現在需要採取不同的方法來採取其他技術原因。

任何有關如何提取img src並將其編碼爲base64字符串的幫助或建議將非常棒。

似乎dataURL方法只適用於canvas？

2014-12-05 user61026

請看看這個[SO問題]（http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using -javascript）。我認爲應該有一個適合你的答案。 – AWolf 2014-12-05 00:18:27

我瞭解您的帖子中概述的畫布方法...但由於我的項目的要求，我不能在這種情況下使用畫布...因此這個問題。 – user61026 2014-12-05 07:31:16

的WOM（窗口對象模型）配備了兩種方法：ATOB和BTOA

你可以稱他們爲： window.atob(str) 或只是 btoa(str)

BTOA編碼字符串BASE-64 ATOB解碼Base-64中的字符串

來源

2014-12-05 00:23:28 SirPython

所以我正確地說，這將編碼圖像src？ – user61026 2014-12-05 07:29:01

@ user61026如果圖像源是一個字符串，是的 - 它會。 – SirPython 2014-12-05 20:23:20

我不完全確定自己是否正確理解它，但是如果您想要從html中編碼圖像，則可以在下面的演示中進行操作。

那裏我創建了一個只在你的js中可用的畫布元素。然後在「虛擬」畫布中繪製圖像，之後您可以使用toDataURL()來執行base64編碼。

在演示中，我已通過將該圖像輸出回輸出格來測試編碼。

我使用的標記中的圖像是base64編碼，因爲我在ctx.drawImage(...)上有過交叉原點問題，但是如果您使用來自相同原點的圖像應該沒有問題。

你可以在這裏找到相同的演示jsFiddle。

$(function() { 
 
    var $sourceImg = $('#sourceImg'); 
 
    var $canvas = $('<canvas/>'); 
 
    var $out = $('#output'); 
 
    
 
    $canvas.prop({"width": $out.width(), "height": $out.height()}); 
 
    
 
    var ctx=$canvas.get(0).getContext("2d"); 
 
    //console.log($sourceImg.prop('src')); 
 
    // draw image on canvas 
 
    var img = new Image(300,300); 
 
    img.src = $sourceImg.prop('src'); 
 
    ctx.drawImage(img,0,0); 
 
    
 
    // convert canvas to base64 image 
 
    var base64img = $canvas.get(0).toDataURL(); 
 
    //console.log(base64img); 
 
    
 
    // test if encoding is correct 
 
    var img = new Image(); 
 
    img.src = base64img; 
 
     
 
    $("#output").append(img); 
 
});

#output { 
 
    display: block; 
 
    width: 100%; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <!-- used base64 encoded image because of security error with cross-origin image directly from http://placehold.it/300x300 --> 
 
    
 
    <img src="data:image/png;base64,R0lGODdhLAEsAeMAAMzMzJaWlsXFxaqqqpycnKOjo76+vre3t7GxsQAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAALAEsAQAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/AAMKHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8eP/iBDihxJsqTJkyhTqlzJsqXLlzB1CRhAIACBAgY0zKxJYIAAnTRt+ryx0yZOoDyHZija82ewAwGiSg2AAIOBmlMJ5LxwdarNrTOgeqVqFatUrWW9ov1lYKzUAxYEmM16Qa5bAjTaug0At4LdsXjjzj0LzCwCAWKjOp2AQKrPAVKrVmgc9XHkGYYRT10sgXIAy1ElU/AMmmwvvaYBeO47gbAEsxZcA4AdA7Xo1RVk06agW6ovAY0DSxDgmIJtxlLBAjjeOXkM4DYpEK9s/HLzqMqZq3b+izMAqQVGc19u/XoAsNqf544aHjn2Cek9oy8vbPpnCgV882aPX39r/hmY/tUeAPlFJdwH9g3QX1TrBTAggf5JAF4xuE2A1YGzGUjBhRVwmIFXP9nHYAgVvqbhhieaGB2KKwIjgACoPZhhiyoe6KGFKV7gVVWejdjBizF2mOOMNg554y9qeTfhggHs52AFBTa51F94mfXiB0k2KGOUTm4ZoS9eKSchgBNw+d+TTHKwGn0dhBkbmRKYOSaaZX7Zy1iszemlj9/BCSGfAaolAp5aQhnhknUCypaVXRrKJ6Jx2nlBYlHlCUJXijWa5pl7SjlMYqIRKSSNR4ragVkYhgAqixgeWWqpwchmKo6kGjlkBlHKOGiOr/JqK43CyPmnp3puymkHlPJlgrDC/vZJ57CF9gKcpcJ6tph9oVo7AbanCvojAtRGqO1w9I0LALe8iNVqjqixJl91lbp3HgeJ1Uvvrwe2K292b+3by6oSpOescLudSbCkFmAVXoGpWgAweaE1eLCivSmaS2aYBuAdadBFPJljHaeGQchwgepdwpHByKh4lYUcqnk+efayLslONfNfWfo1mIEnN9jiYBrUzOa5O9t0Ms5Z9ZyL0Apy5ZaY8D3Ngc3yWkwB01ZJ7fRYUPNSlIOW+hVUU0gJpbTP19K1wdcFhC3d2EqNDPfZMdVt991456333nz37fffgAcu+OCEF2744YgnrvjijDfu+OOQRy755JRXbvnlaZhnrvnmnHfu+eeghy766KSXbvrpqKeu+uqst+7667DHLvvstNdu++2456777rz37vvvwAcv/PDEF2/88cgnr/zyzDfv/PPQRy/99NRXb/312Gev/fbcd+/99+CHL/745Jdv/vnopz9MBAA7" id="sourceImg"/> 
 
    <div id="output"> 
 
     <h2>test ouput of base64 encoded image:</h2> 
 
    </div> 
 
</div>

來源

2014-12-05 10:49:38 AWolf

回答

相關問題