首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Base64编码

Base64编码
EN

Stack Overflow用户
提问于 2014-12-05 08:00:05
回答 2查看 196关注 0票数 0

好的,我正在接近一个项目的尾声,我遇到了一个小的技术问题。为了简单地修复它,我需要一种方法来获取javascript中的html元素,并将其编码为base64字符串?

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

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

似乎dataURL方法只适用于canvas??

EN

回答 2

Stack Overflow用户

发布于 2014-12-05 08:23:28

WOM(窗口对象模型)提供了两种方法: atob和btoa

您可以将它们称为:window.atob(str)btoa(str)

btoa将字符串编码为Base-64,atob解码Base-64格式的字符串

票数 0
EN

Stack Overflow用户

发布于 2014-12-05 18:49:38

我不太确定我是否理解正确,但是如果你想从你的html中编码一个图像,你可以像下面的演示中那样做。

在这里,我创建了一个仅在js中可用的canvas元素。然后在“虚拟”画布中绘制图像,然后可以使用toDataURL()进行base64编码。

在演示中,我通过将图像输出回输出div来测试编码。

我使用的标记中的图像是base64编码的,因为我在ctx.drawImage(...)遇到过跨域问题,但是如果您使用来自相同来源的图像,应该没有问题。

你可以在jsFiddle上找到同样的演示。

代码语言:javascript
复制
$(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);
});
代码语言:javascript
复制
#output {
    display: block;
    width: 100%;
    height: 500px;
}
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27306510

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档