簡體   English   中英

Base64編碼

[英]Base64 encoding

好的,我快要結束項目了,我遇到了一個小技巧。 為了輕松修復它,我需要一種方法來獲取javascript中的html元素並將其編碼為base64字符串?

我知道畫布可以做到這一點-因為這是我現在要工作的方式,但是由於其他技術原因,該項目現在需要采用其他方法。

關於如何提取img src並將其編碼為base64字符串的任何幫助或建議都很棒。

看來dataURL方法僅適用於畫布?

WOM(窗口對象模型)帶有兩種方法:atob和btoa

您可以將它們稱為: window.atob(str)或僅btoa(str)

btoa編碼為Base-64的字符串atob解碼為Base-64的字符串

我不確定我是否正確理解它,但是如果您想從html中編碼圖像,則可以像下面的演示中那樣進行操作。

在那里,我創建了一個canvas元素,該元素僅在您的js中可用。 然后在“虛擬”畫布上繪制圖像,然后可以使用toDataURL()進行base64編碼。

在演示中,我通過將圖像輸出回輸出div來測試了編碼。

我使用的標記中的圖像是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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM