Databases
StackOverflow2013
Postsdbo
POConvert and insert Base64 data to Canvas in Javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConvert and insert Base64 data to Canvas in Javascript
    text
    copied!<p>I get a buffer of data represent an image in Base64. The data I got (represent image in base64) (part of the data)</p> <p><code>193,109,51,74,182,71,212,38,78,62,211,48,81,145,244,39,244,250,215,192,113,46,101,136,203,149,44,6,90,147,197,215,109,66,251,69,47,138,111,202,43,239,122,45,108,125,22,6,149,44,84,103,136,198,74,212,41,171,203,188,187,69,121,183,255,0,7,75,156,191,140,190,45,181,219,141,43,195,214,107,30,129,3,145,38,110,60,135,185,35,130,119,4,108,244,238,0,227,3,140,86,85,237,134,149,241,3,69,158,251,71,134,93,31,88,211,72,82,1,30,100,76,70,65,12,9,12,141,207,94,184,32,140,215,45,47,196,111,130,177,187,34,120,79,197,65,84,224,8,175,93,20,99,176,31,107,24,250,96,85,141,47,227,159,195,111,11,219,223,46,133,225,175,17,91,73,120,170,178,189,196,137,49,96,185,218,50,247,44,64,27,155,167,173,123,252,61,144,97,242,8,63,102,156,234,207,227,169,43,115,77,245,230,119,122,111,104,173,23,78,167,204,103,121,165,108,217,46,88,184,40,124.....</code></p> <p>Successfully decode.</p> <p>Now I'm trying to add the image to my canvas without success as following:</p> <pre><code>function fillCanvasImage(x, y, width, height, image, pageID) { if (image == "") return; var canvas = document.getElementById("AppPmainCanvas" + pageID); if (canvas &amp;&amp; canvas.getContext) { var context = canvas.getContext('2d'); if (context) { context.clearRect(0, 0, canvas.width, canvas.height); var img = new Image(); img.src = base64_decode(image); //img.onload = function () { context.drawImage(img, 0, 0, canvas.width, canvas.height); //} } } } </code></pre> <p>I'm convert the data form base64 by:</p> <pre><code>function base64_decode(data) { var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; var o1, o2, o3, h1, h2, h3, h4, bits, i = 0, ac = 0, dec = "", tmp_arr = []; if (!data) { return data; } data += ''; do { // unpack four hexets into three octets using index points in b64 h1 = b64.indexOf(data.charAt(i++)); h2 = b64.indexOf(data.charAt(i++)); h3 = b64.indexOf(data.charAt(i++)); h4 = b64.indexOf(data.charAt(i++)); bits = h1 &lt;&lt; 18 | h2 &lt;&lt; 12 | h3 &lt;&lt; 6 | h4; o1 = bits &gt;&gt; 16 &amp; 0xff; o2 = bits &gt;&gt; 8 &amp; 0xff; o3 = bits &amp; 0xff; if (h3 == 64) { tmp_arr[ac++] = String.fromCharCode(o1); } else if (h4 == 64) { tmp_arr[ac++] = String.fromCharCode(o1, o2); } else { tmp_arr[ac++] = String.fromCharCode(o1, o2, o3); } } while (i &lt; data.length); dec = tmp_arr.join(''); dec = utf8_decode(dec); return dec; }; // private method for UTF-8 decoding function utf8_decode(utftext) { var string = ""; var i = 0; var c = 0, c1 = 0, c2 = 0; while (i &lt; utftext.length) { c = utftext.charCodeAt(i); if (c &lt; 128) { string += String.fromCharCode(c); i++; } else if ((c &gt; 191) &amp;&amp; (c &lt; 224)) { c1 = utftext.charCodeAt(i + 1); string += String.fromCharCode(((c &amp; 31) &lt;&lt; 6) | (c1 &amp; 63)); i += 2; } else { c1 = utftext.charCodeAt(i + 1); c2 = utftext.charCodeAt(i + 2); string += String.fromCharCode(((c &amp; 15) &lt;&lt; 12) | ((c1 &amp; 63) &lt;&lt; 6) | (c2 &amp; 63)); i += 3; } } return string; }; </code></pre> <p>It does not work, I do the following: in my server side I convert the image as following: </p> <pre><code>public static string BitmapSourceToByteBase64(System.Windows.Media.Imaging. { var encoder = new System.Windows.Media.Imaging.JpegBitmapEncoder(); var frame = System.Windows.Media.Imaging.BitmapFrame.Create(source); encoder.Frames.Add(frame); var stream = new MemoryStream(); encoder.Save(stream); return Convert.ToBase64String(stream.ToArray()); //I tired to do return "data:image/name_jpg;base64,"+Convert.ToBase64String(stream.ToArray()); //But got an exception on serialize base64 div 4 in the web client } </code></pre> <p>in my website, I got the data (base64 image) and try to do the following: context.drawImage(0,0,'data:image/jpeg;base64,'+image); I also tried: context.drawImage('data:image/jpeg;base64,'+image,0,0); </p> <p>NOT WORK!!! any idea?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload