Base64编码

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??

Answer 1

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

Answer 2

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>