title: Convert and insert Base64 data to Canvas in Javascript
body: <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>