Base64 encoding

Question

Ok I am nearing the end of a project and I ran into a small technicality. To fix it easily I need a way to take the of a html element in javascript and encode it into a base64 string?

I know that this is possible with canvas - as that is how I have it working at the moment BUT the project now requires a different approach to be taken for other technical reasons.

Any help or advice on how to extract an img src and encode it into a base64 string would be awesome.

It seems that the dataURL method only works with canvas??

Please have a look at this [SO question](http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript). I think there should be an answer working for you. — AWolf, Dec 05 '14 at 00:18
I understand the canvas method as outlined in your post... but due to the requirements of my project I cannot use canvas in this instance... hence the question. — user61026, Dec 05 '14 at 07:31

score 0 · Answer 1 · answered Dec 05 '14 at 00:23

0

The WOM(Window Object Model) comes with two methods: atob and btoa

You can call them as: window.atob(str) or just btoa(str)

btoa encodes a string to Base-64 atob decodes a string in Base-64

answered Dec 05 '14 at 00:23

SirPython

647
6
19

so am I right in saying that this will encode the image src? – user61026 Dec 05 '14 at 07:29
@user61026 If the image source is a string, yes - it will. – SirPython Dec 05 '14 at 20:23

score 0 · Answer 2 · answered Dec 05 '14 at 10:49

I'm not exactly sure if I've understood it correctly, but if you'd like to encode an image from your html you could do it like in the demo below.

There I've created a canvas element that's just available in your js. Then draw your image in that "virtual" canvas and afterwards you can use toDataURL() to do the base64 encoding.

In the demo I have tested the encoding by outputting that image back to the output div.

The image in the markup I have used is base64 encoded because I have had cross-origin issues at ctx.drawImage(...) but if you use an image from the same origin that should be no problem.

You can find the same demo here at 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>

Base64 encoding

2 Answers2