好的,我正在接近一个项目的尾声,我遇到了一个小的技术问题。为了简单地修复它,我需要一种方法来获取javascript中的html元素,并将其编码为base64字符串?
我知道使用canvas可以做到这一点-因为这就是我目前的工作方式,但由于其他技术原因,该项目现在需要一种不同的方法。
任何关于如何提取img并将其编码为base64字符串的帮助或建议都将是非常棒的。
似乎dataURL方法只适用于canvas??
发布于 2014-12-05 08:23:28
WOM(窗口对象模型)提供了两种方法: atob和btoa
您可以将它们称为:window.atob(str)或btoa(str)
btoa将字符串编码为Base-64,atob解码Base-64格式的字符串
发布于 2014-12-05 18:49:38
我不太确定我是否理解正确,但是如果你想从你的html中编码一个图像,你可以像下面的演示中那样做。
在这里,我创建了一个仅在js中可用的canvas元素。然后在“虚拟”画布中绘制图像,然后可以使用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>
https://stackoverflow.com/questions/27306510
复制相似问题