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.
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;
So I am using mongoDB as my database and I have saved an image in mongoDB in binary format.
The image below is how the data is being displayed in my database.
I have tried the following:
<img src="data:image/jpeg;base64{<%= user.img.data %>}"/>
But the above code does not seem to work. Please note I am using EJS as a tempting engine.
After doing the inspect element on google chrome I found that the data was being shown like so:
I am not sure how to read this binary image and display it in a img tag in html.
UPDATE:
After making the changes recommended by Alex Matos in the comments I get the following output:
If you really got the images data and saved it i mongo db, you could render the image in a canvas and append it wherever you need.
// Renders the image data in a canvas off screen
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var data = ctx.putImageData(YOUR_MONGODB_DATA,0,0);
// Initializes a new image from canvas and appends it to the parent you want
var image = new Image();
image.id = "rendered-picture"
image.src = canvas.toDataURL();
document.getElementById('PARENT_ID').appendChild(image);
Try returning data from your server using base64_encode.
For example:
<?php
$picture = base64_encode(user.img.data);
<img src="data:image/jpeg;base64{<%= picture %>}"/>
?>
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>
I'm attempting to consume server-side code that is owned by another team and that I can't easily change. It is processing an image and returning it via Response.BinaryWrite:
MemoryStream ms = new MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
var imageToReturn = ms.ToArray();
Response.ContentType = "image/jpg";
Response.BinaryWrite(imageToReturn);
However, when I attempt to do standard client-side processing of the result, like using Javascript's btoa() to convert it from a byte array to an ArrayBuffer, I get messages like "'btoa' failed: The string to be encoded contains characters outside of the Latin1 range".
I really just want to be able to display and work with this image - so any approach that would get it to appear in a canvas, or convert it to a data URL, etc., would help me out. Am I missing something?
If you just want to display the image, why don't you just src attribute of img tag to the url of the ASP.Net page, which is writing the JPG in the in the response.
If you want to display the image in canvas, you can do it in following way
myimage = new Image();
myimage.onload = function () {
var canvas = document.getElementById('canv');
var ctx = canvas.getContext('2d');
ctx.drawImage(myimage, x, y);
}
myimage.src = '<url to the asp.net page>';
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?