I have created a custom product configurator and i am using html2canvas to generate a base64 encoded string of a canvas element.
If you go to: http://faithpointdallas.com/ecom/page/customStole you can see that when you click "add to cart" at the bottom, it uses the html2canvas script to alert a generated base64 encoded string.
My question is: How can i take that base64 encoded string and turn it into a regular image tag. Like <img src="myconvertedbase64string.PNG" />
Here is the code that is generating the string:
$('#addToCart').click(function(event) {
event.preventDefault();
var target = $('.customstole');
html2canvas(target, {
onrendered: function(canvas) {
var data = canvas.toDataURL();
alert(data);
// data is the Base64-encoded image
}
});
});
This might help - it uses jQuery to post the base64 encoded URL to the server and then saves it to a file with some PHP:
http://www.rgraph.net/docs/integration-with-server-side-scripting.html#image
Also, did you know that you can use the data: url returned by toDataUrl() directly as the tag src?
Related
I'm trying to decode a custom base64 image in my web application but for some reason I'm facing some difficulties.
The server returns an image as custom base64 string:
//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w////wP////////////////////////////////////////////D////Af///////////////////////////////////////////8P///8A////////////////////////////////////////////w////wA////////////////////////////////////////////D////AB///////////////////////////////////////////8P///8AD///////////////////////////////////////////w////wAD///////////////////////////////////////////D////AAD//////////////////////////////////////////8P///8AAH//////////////////////////////////////////w////wMAH////////////////////////8AAAAAAAAAAAAAAP//D////A8AH////////////////////////wAAAAAAAAAAAAAA//8P///8D4AH////////////////////////H/////////////j//w////wPwAH///////////////////////8P////////////8P//D////A/wAH///////////////////////w/////////////w//8P///8D/wAD///////////////////////B////////////+D//w////wP/gAB//////////////////////8H////////////4P//D////A//gAA////////////8P////////wP////////////A//8P///8D//gAAP//////////+AH////////M////////////8z//w////wP//gAAA////////D/wAH///////8x////////////jP//D////A///gAAAP//////4P+AAP///////zj///////////8c//8P///8D///wAAA//////+A/wAAf///////OP///////////xz//w////wP///4AAD//////wD/AAB///////88f//////////+PP//D////A////8AAP//////AP4AAD///////z5///////////58//8P///8D/////AA//////4A/gPwP///////Pj///////////Hz//w////wP/////wD//////gP+B/gf//////8/P//////////8/P//D////A/////////////8B/wH+B///////z8f//////////j8//8P///8D/////////////wP/Af8H///////P4//////////8fz//w////wP/////////////B/8D/wf//////8/j//////////x/P//D////A/////////////8H/gP/A///////z/H/////////+P8//8P///8D/////////////wf+A/+D///////P8f/////////4/z//w////wP/////////////B/4H/4P//////8/4//////////H/P//D////A/////////////4H/gf/g///////z/z/////////8/8//8P//////////////////gf8B/+D///////P/H/////////j/z//w//////////////////+B/wH/wP//////8/+f////////+f/P//D//////////////////8H/A//A///////z/4/////////x/8//8P//////////////////wf4D/8H///////P/x////////+P/z//w///////////////////B/gP/gf//////8//H////////4//P//D//////////////////8D+B/+B///////z/+P////////H/8//8P//////////////////wHwH/wH///////P/8////////8//z//w///////////////////gMAf8A///////8//x////////j//P//D//////////////////+AAD+AD///////z//n///////+f/8//8P//////////////////8AAP4Af///////P/+P///////x//z//w///////////////////4AB/gD///////8//8////////P//P//D///////////////////wAP+Af///////z//x///////4//8//8P///////////////////gB/8D////////P//j///////H//z//w////////////////////w//w////////8//+P//////8f//P//D///////////////////////f////////z//8f//////j//8//8P////////////////////////////////P//5//////+f//z//w////////////////////////////////8///j//////x///P//D///+AAAAAAAAP///////////////////z///P//////P//8//8P///4AAAAAAAA////////////////////P//8f/////4///z//w////gAAAAAAAD///////////////////8///5//////H///P//D///+AAAAAAAAP///////////////////z///j/////8f//8//8P///8AAAAAAAA////////wAAAH///////P///H/////j///z//w////8AAAAAAAD///////AAAAAf//////8///8f////+P///P//D////4B/////////////wAAAAB///////z///4/////x///8//8P////wH////////////8AAAAAH///////P///z/////P///z//w/////gP////////////wAAAAAf//////8////H////4////P//D/////Af///////////+AAAAAB///////z///+f////n///8//8P////+A////////////wAAAAAH///////P///4////8f///z//w/////4D////////////AP///////////8////x////j////P//D/////wH///////////8B////////////z////H///+P///8//8P/////gf///////////wP////////////P///+P///x////z//w//////A///////////+B////////////8////4////P////P//D/////8D///////////4H////////////z////x///4////8//8P/////4H///////////gf////////////P////n///n////z//w//////gf///////////B////////////8////+P//8f////P//D//////////////////8H////////////z////8///z////8//8P//////////////////wf////////////P////x//+P////z//w///////////////////B////////////8/////j//x/////P//D//////////////////+D////////////z////+P//H////8//8P//////////////////4P////////////P////8f/4/////z//w///////////////////wf///////////8/////5//n/////P//D///////////////////g////////////z/////j/8f////8//8P///////////////////Af///////////P/////P/z/////z//w///////////////////+AAAAAf//////8/////8f+P/////P//D///////////////////4AAAAB///////z/////5/5/////8//8P//////////////////+AAAAAH///////P/////j/H/////z//w///////////////////wAAAAAf//////8//////H4//////P//D//////////////////+AAAAAB///////z/////8fj/////8//8P//////////////////4AAAAAH///////P/////48f/////z//w///////////////////AAf//////////8//////zz//////P//D//////////////////8A////////////z//////GP/////8//8P//////////////////wP////////////P/////+Z//////z//w///////////////////A////////////8//////4H//////P//D//////////////////4H////////////z//////w//////8//8P//////////////////gf////////////P//////D//////z//w//////////////////+B////////////8//////8P//////P//D//////////////////8H////////////z//////w//////8//8P//////////////////wf////////////P/////+B//////z//w///////////////////B////////////8//////5n//////P//D//////////////////8D////////////z//////GP/////8//8P//////////////////4P////////////P/////88//////z//w///////////////////gf///////////8//////jx//////P//D///////////////////A////////////z/////8fj/////8//8P//////////////////+B////////////P/////x+P/////z//w///////////////////8A///////////8/////+P8f/////P//D///////////////////4AAAAB///////z/////5/5/////8//8P//////////////////wAAAAAH///////P/////H/j/////z//w///////////////////AAAAAAf//////8/////8//P/////P//D//////////////////8AAAAAB///////z/////j/8f////8//8P//////////////////wAAAAAH///////P////+f/5/////z//w///////////////////AAAAAAf//////8/////x//j/////P//D////////////////////////////////z////+P//H////8//8P////////////////////////////////P////4//8f////z//w////////////////////////////////8/////H//4/////P//D////////////////////////////////z////8///z////8//8P////////////////////////////////P////j///H////z//w////////////////////////////////8////+f//+f////P//D////////////////////////////////z////x///4////8//8P////////////////////////////////P////P///z////z//w/////////////////////gP3////////8////4////H////P//D////////////////////gA/H////////z////H///+P///8//8P///////////////////4AD8H////////P///8f///4////z//w////////////////////AAPwH///////8////j////x////P//D///////////////////wAA+AP///////z///+f////n///8//8P///////////////////AAD4A////////P///x////+P///z//w///////////////////4AAPgB///////8////P////8////P//D///////////////////APg/gD///////z///4/////x///8//8P//////////////////4B+D/gP///////P///H/////j///z//w///////////////////gf4P/Af//////8///8f////+P///P//D//////////////////8D/g/+B///////z///j/////8f//8//8P//////////////////wP+D/8H///////P//+f/////x///z//w///////////////////B/4P/wf//////8///x//////j///P//D//////////////////8H/g//A///////z///P//////P//8//8P//////////////////wf+D/+D///////P//4//////8f//z//w//////////////////+B/4P/4P//////8///n//////5///P//D//////////////////4H/g//g///////z//8f//////j//8//8P//////////////////gf+D/+D///////P//j///////H//z//w///////////////////B/4P/wP//////8//+P//////8f//P//D//////////////////8H/g//A///////z//x///////4//8//8P//////////////////wf+D/8H///////P//P///////z//z//w///////////////////A/4P/gf//////8//4////////H//P//D//////////////////8D/g/+B///////z//n///////+f/8//8P//////////////////4H+D/wH///////P/8f///////4//z//w///////////////////gP4P+A///////8//z////////z//P//D///////////////////APg/gD///////z/+P////////H/8//8P//////////////////8AOD4Af///////P/x////////+P/z//w///////////////////4AAAAD///////8//H////////4//P//D///////////////////wAAAAf///////z/4/////////x/8//8P///////////4///////gAAAD////////P/n/////////n/z//w///////////+D///////gAAAf///////8/8f////////+P/P//D///////////AP///////AAAH////////z/z/////////8/8//8P//////////wA////////AAB/////////P+P/////////x/z//w//////////4AD////////4B/////////8/x//////////j/P//D/////////+AAP///////////////////z/H/////////+P8//8P/////////gAA////////////////////P4//////////8fz//w/////////wAAH///////////////////8/j//////////x/P//D////////8AAD////////////h///////z8f//////////j8//8P///////+AAA///////wf///4H///////Pz///////////Pz//w////////gAAf///////B////wf//////8+P//////////8fP//D///////wAAP///////8H////B///////z5///////////58//8P//////8AAD////////wf///8H///////PH///////////jz//w//////+AAAf////////B////gf//////84////////////HP//D//////gAAB////////8H///8B///////zj///////////8c//8P/////4AAAH//////wAAAAAAAH///////Mf///////////4z//w/////8AAHgf//////AAAAAAAAf//////8z////////////zP//D/////AAB+B//////+AAAAAAAB///////wP////////////A//8P////gAA/4H//////4AAAAAAAP///////B////////////+D//w////4AAf/gf//////wAAAAAAB///////8H////////////4P//D///+AAH/+B///////gAAAAAAP///////w/////////////w//8P///4AD//4H////////wf////////////D/////////////D//w////gB///gf////////B////////////8f////////////+P//D///+A///+B////////8H////////////wAAAAAAAAAAAAAA//8P///4B///4H////////wf////////////AAAAAAAAAAAAAAD//w////gAf//gf////////B//////////////////////////////D///+AAP/+B///////////////////////////////////////8P///8AAH/4H///////////////////////////////////////w////8AAH/gf///////////////////////////////////////D////+AAD+B///////////////////////////////////////8P////+AAB4H////////////gP/////////////////////////w//////AABgf/////////z/4AP/////////////////////////D//////gAAB/////////8P/AAf////////////////////////8P//////gAAH/////////A/4AA/////////////////////////w///////wAAP////////4D/AAB/////////////////////////D///////wAAP////////AP8AAD////////////////////////8P///////4AAH///////4A/gHAP////////////////////////w////////8AAD///////gD+A/A/////////////////////////D////////8AAB//////+B/wH+B////////////////////////8P////////+AAB//////wP/Af8H////////////////////////w/////////+AAD//////A/8D/wf////////////////////////D//////////AAP/////8H/wP/A////////////////////////8P//////////gA//////wf+A/+D////////////////////////w///////////gD//////B/4D/4P////////////////////////D///////////wP/////4H/gf/g////////////////////////8P///////////w//////gf8B/+D////////////////////////w////////////7/////+B/wH/4P////////////////////////D//////////////////8H/Af/A////////////////////////8P//////////////////wf8D/8D////////////////////////w///////////////////B/gP/wf////////////////////////D/////////+////////8H+A/+B////////////////////////8P////////8AH///////wPwH/wH////////////////////////w//////D//gAH///////geAf+A/////////////////////////D/////gP/4AAP//////+AAB/gD////////////////////////8P////4A//AAAf//////8AAP4Af////////////////////////w/////AD/4AAA///////wAB/gB/////////////////////////D////4AP/gAAB///////gAH+AP////////////////////////8P////AA/8APgD///////AB/8B/////////////////////////w////8AD/wD/gP///////AP/wf/////////////////////////D////gD/+Af/Af//////////H/////////////////////////8P///8A//4D/8B/////////////////////////////////////w////wH//AP/4D/////////////////////////////////////D////A//8B//wP////////////////////////////////////8P///4D//wH//A//////3//////////////////////////////w////gf/+Af/8D//////D//////////////////////////////D///+B//4D//wH/////8B/////////////////////////////8P///4H//gP//gf/////wB/////////////////////////////w////gf/+A//+B//////AA/////////////////////////////D///8D//wH//4H/////8AAf///////////////////////////8P///wP//Af//gf/////4AAf///////////////////////////w////A//8B//+B//////4AAP////////////////wP/////////D///8D//wH//4H//////8AAH////////////////Af////////8P///wP/+A///gf//////+AAH///////////////8A/////////w////A//4D//8B////////AAD///////////////wA/////////D///+B//gP//wP////////AAB///////////////AB////////8P///4H/+A///A/////////gAB//////////////8AD////////w////gf/wH//8D/////////wAA//////////////wAD////////D///+B//Af//gP/////////4AAf/////////////AAD///////8P///4D/8B//+A//////////8AB/////////////8AAH///////w////wP/gP//wH//////////+AH/////////////wMAH///////D////Af8A//+Af//////////wAf/////////////A8AH//////8P///+AfgH//wD//////////wAB/////////////8D4AH//////w////4AAAf/+AP/////////4AAH/////////////wPwAH//////D////wAAD//gB/////////+AAH//////////////A/wAH/////8P////gAAP/gAH/////////AAB//////////////8D/wAD/////w/////AAB/+AA/////////gAA///////////////wP/gAB/////D////+AAf/4AH////////wAAf///////////////A//gAA////8P////+AD//gB////////4AAH///////////////8D//gAAP///w/////+B//+AP///////+AAD////////////////wP//gAAA///D/////////8D////////AAB/////////////////A///gAAAP/8P/////////x////////wAAf////////////////8D///wAAA//w///////////////////AAP/////////////////wP///4AAD//D//////////////////8AD//////////////////A////8AAP/8P//////////////////wB//////////////////8D/////AA//w///////////////////A///////////////////wP/////wD//D//////////////////8P///////////////////A/////////8P//////////////////3///////////////////8D/////////w///////////////////////////////////////wP/////////D///////////////////////////////////////A/////////8P//////////////////////////////////////8D/////////w////gAAAAAAAD//////////////////////////wP/////////D///+AAAAAAAAP//////////////////////////A/////////8P///4AAAAAAAA/////////wB//////////////////////////w////gAAAAAAAD/////8f/8AB//////////////////////////D///+AAAAAAAAP////+B//AAB/////////////////////////8P///4AAAAAAAA/////gH/4AAD/////////////////////////w///////8D////////4Af/gAAH/////////////////////////D///////wP////////AB/8AAAP////////////////////////8P///////A////////4AH/gB8Af////////////////////////w///////8D////////gAf+Af4B/////////////////////////D///////wP///////8Af/wD/wD////////////////////////8P///////A////////wD//Af/gP////////////////////////w///////8D///////+A//4B//Af////////////////////////D///////wP///////4H//gP/8B////////////////////////8P///////A////////Af/+A//4H////////////////////////w///////8D///////8D//4D//gf////////////////////////D///////wP///////wP//Af/+A////////////////////////8P///////A////////A//8B//8D////////////////////////w///////8D///////8D//wH//wP////////////////////////D///////wP///////gf//A///A/////////////+AAAAAAAAP/8P///////A///////+B//4D//8D/////////////4AAAAAAAA//w///////8D///////4H//gP//wP/////////////gAAAAAAAD//D///////wP///////gf/+A///A/////////////+AAAAAAAAP/8P///////A///////+B//wH//8D/////////////8AAAAAAAA//w///////8D///////4H//Af//gP/////////////8AAAAAAAD//D///////wP///////wP/8B//+B//////////////4B////////8P///////A////////A//wH//4H//////////////wH////////w///////8D///////8D/+A///gf//////////////gP////////D///////wP///////wP/4D//8B///////////////Af///////8P///////A////////Af/gP//wH//////////////+A////////w///////8D///////+B/8B//+A///////////////4D////////D///////wP///////4D/gH//4D///////////////wH///////8P///////A////////wH8Af//AP///////////////gf///////w////gAAAAAAAD////ADAD//wB////////////////A////////D///+AAAAAAAAP///+AAAf/8AP///////////////8D///////8P///4AAAAAAAA////8AAB/+AA////////////////4H///////w////gAAAAAAAD////wAAP/wAH////////////////gf///////D///+AAAAAAAAP////wAB//AA/////////////////////////8P///4AAAAAAAA/////gAf/8AH/////////////////////////w////gAAAAAAAD/////wH//wB//////////////////////////D//////////////////////gf/////////////////////////8P/////////////////////+P//////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w//////////////////////////////////////////////////D/////////////////////////////////////////////////8P/////////////////////////////////////////////////w
I do also get information about width, height, bytesize & and format. The format in this case is "Mono 8 bit".
Is there anyway that this string can be decoded to the image?
Edit #1
Here is a simple code. Iam just trying to append it to the src of the element. Like this, which of course wont work:
const imgData = "base64 string from above";
const image = document.getElementById('testImage');
image.src = "data:image/jpeg;charset=utf-8;base64, + " imgData;
I'm getting a blob file from mySql and It looks like the image below.
and I'd like to show this image through <img src={imagefile}/> (I'm using React.js).
How can I the blob file to url link?
I tried URL.createObjectURL(imagefile)
but It gives me an error that
Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided
please Help ToT
You need to convert you data to base64 by using the folowing code, then use can use Base64 in your img tag < img src="yourbase64here"/>
let base64String = btoa(String.fromCharCode(...new Uint8Array(data)));
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??
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
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>
how to convert image url to base64 encoded data url without using html5 canvas object.
canvas.todataURL()
I am gettting base64 data using canvas.todataURL, but it fails to read remote url's, so I want to convert my image url to dataurl with out using canvas.todataURL() and use it in my application.
HOw can I to do this.
You can use this code-
HTML-
<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
<canvas id="myCanvas" />
javascript-
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
alert(c.toDataURL());
</script>
found it here-
How to get base64 encoded data from html image
You can't do it purely in javascript without using canvas.toDataUrl(). You would have to do something server-side. Basically create a simple service which takes an url to an image as parameter and then returns that image as a base64 string.
I am writing an Adobe Air app in HTML/JavaScript and I am trying to base64 encode an image so I can add it to and XML RPC request. I have tried many methods and nothing seems to work.
I see that actionscript has a Base64Encoder class that look like it would work, is there any way to utilize this in JavaScript?
Thanks #some for the link.
I used the btoa() function to base64 encode image data like this:
var loader = new air.URLLoader();
loader.dataFormat = air.URLLoaderDataFormat.BINARY;
loader.addEventListener(air.Event.COMPLETE,function(e){
var base64image = btoa(loader.data);
});
var req = new air.URLRequest('file://your_path_here');
loader.load(req);
I was trying to upload an image using metaWeblog.newMediaObject, but it turns out that the data doesn't need to be base64 encoded, so the binary value was all that was needed.