How to get base64 from canvas image?

Question

I searched a lot and didn't find anything right.

Here's my code:

context.drawImage(img, 0, -realDif, width, width*def);
var base64 = canvas.toDataURL("image/jpeg");

The string that toDataUrl returns me isnt base 64 as some people told me and i really cant find a way to convert it. Does anyone have a clue?

This is what i'm getting and as u can check in a online decoder it's not working

string(2415) "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCADhALQDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAP/Z"

Here's the complete code

var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var URL = window.URL || window.webkitURL,
    imageUrl,
    img;

    if (URL) {
      imageUrl = URL.createObjectURL(file);
      img = document.createElement("img");
      img.src = imageUrl;
      img.onload = function() {
          URL.revokeObjectURL(imageUrl);          
          var def = (img.height / img.width);
          if(def < 1.25){
              dif = (heigh/def) - width;
              realDif = dif/2;
              context.drawImage(img, -realDif, 0, heigh/def, heigh);
          } else {
              dif = (width*def) - heigh;
              realDif = dif/2;
              context.drawImage(img, 0, -realDif, width, width*def);
          }
      } 
    }
    var inpHidden = document.getElementById("img64");
    inpHidden.value = canvas.toDataURL("image/jpeg");   
    document.getElementById("avatarForm").submit();

If i just dont send the form in the end i can see the canvas being drawed correctly in the previous page... What can be wrong

it is base64, with a prefix. what makes you think it's not? log it to the console and you will see data:image/png;base64,... everything after base64, is the base64 encoded image. — I wrestled a bear once.
Possible duplicate of Getting binary (base64) data from HTML5 Canvas (readAsBinaryString) — Daniel Corzo
Ditto @Iwrestledabearonce. canvas.toDataURL does indeed produce a base64 encoded image string. ;-) — markE
Dudes i'm not kidding i already cut that first thing off but no base64 decoder can do that, and i decoded the same image on a base64 encoder and got a diferent code... something is not right — user3120770
Ahhhhh ... I see what you're noticing! When drawing images onto the canvas, browsers are allowed to gamma correct and color pre-multiply the pixel colors so you won't get an exact base64 match between .toDataURL and a non-browser image decoder. You probably won't get a match between different browsers. — markE

user3120770 user3120770 · Accepted Answer · 2016-11-16T11:57:37

Well i just put the canvas.toDataURL("image/jpeg"); inside the onlad function and it's working now

if (URL) {
      imageUrl = URL.createObjectURL(file);
      img.src = imageUrl;
      img.onload = function() {
          //URL.revokeObjectURL(imageUrl);        
          var def = (img.height / img.width);
          if(def < 1.25){
              dif = (heigh/def) - width;
              realDif = dif/2;
              context.drawImage(img, -realDif, 0, heigh/def, heigh);
          } else {
              dif = (width*def) - heigh;
              realDif = dif/2;
              context.drawImage(img, 0, -realDif, width, width*def);
          }
          var inpHidden = document.getElementById("img64");
          inpHidden.value = canvas.toDataURL("image/jpeg");
          document.getElementById("avatarForm").submit();
      }

Hope this helps someone someday, thanks you all specially @Kaiido

How to get base64 from canvas image?

1 Answers