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., Nov 15 '16 at 19:48
Ditto @Iwrestledabearonce. `canvas.toDataURL` does indeed produce a base64 encoded image string. ;-) — markE, Nov 15 '16 at 19:52
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, Nov 15 '16 at 20:11
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, Nov 15 '16 at 21:21
@markE But here OP's image is just a black rectangle, so gamma correction should not be a problem ;-) (I guess this is because one didn't wait for the image has loaded). However, this is true that every browser and even every machine will produce a different output from canvas drawing + toDataURL(). If what you want is an exact base64 version of a file, then [use a FileReader](http://stackoverflow.com/questions/36273990/canvas2d-todataurl-different-output-on-different-browser/36274211#36274211). — Kaiido, Nov 16 '16 at 00:37
@Kaiido. A black rectangle ... really? I didn't bother viewing the image. — markE, Nov 16 '16 at 04:21
But @Kaiido i am doing my context.drawImage and toDataURL inside the img.onload function, and my canvas is changing but i dont know what can it be, looks like it's a problem like that — user3120770, Nov 16 '16 at 11:32

score 0 · Answer 1 · answered Nov 16 '16 at 11:57

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 Answers1