Base64 编码答案

【问题标题】：Base64 encodingBase64 编码
【发布时间】：2014-12-05 18:49:38
【问题描述】：

好的，我即将完成一个项目，但遇到了一个小技术问题。为了轻松修复它，我需要一种方法来获取 javascript 中的 html 元素并将其编码为 base64 字符串？

我知道画布可以做到这一点 - 因为我目前就是这样工作的，但由于其他技术原因，该项目现在需要采用不同的方法。

任何关于如何提取 img src 并将其编码为 base64 字符串的帮助或建议都很棒。

好像dataURL方法只对canvas有效？？

【问题讨论】：

请看一下这个SO question。我认为应该有一个适合你的答案。
我理解您帖子中概述的 canvas 方法...但是由于我的项目的要求，我不能在这种情况下使用 canvas...因此问题。

标签： javascript html image base64

【解决方案1】：

WOM(Window Object Model)自带两种方法：atob和btoa

您可以将它们称为： window.atob(str) 要不就 btoa(str)

btoa 将字符串编码为 Base-64 atob 解码 Base-64 中的字符串

【讨论】：

我说得对吗？这将对图像 src 进行编码？
@user61026 如果图像源是字符串，是的 - 它会。

【解决方案2】：

我不确定我是否理解正确，但如果您想从 html 中对图像进行编码，您可以像下面的演示中那样进行。

在那里，我创建了一个仅在您的 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>

【讨论】：