How to upload image canvas

Question

I get the result of an image through this function this.canvas.toDataURL('png'), this function generates the image normally, the dots are:

• How to upload this to the PHP server using jQuery?
• Is it the right way to upload? It won’t harm me because it’s not a normal upload, with form input etc..?

Answer 1

How to upload this to the PHP server using jQuery?

It’s quite simple: Convert your canvas to blob and send an Ajax, with a small modification in the settings.

 function ajaxUpload(options) {
      options = $.extend({}, {contentType: false, cache: false, processData: false}, options);
      return $.ajax(options);
 }

 canvas.toBlob(function (blob) {

     var data = new FormData();
     data.append('imagem', blob);

     ajaxUpload({url: '/upload.php', data: data}).success(function () {
        console.log('upload concluído com sucesso');
     });
 });

Is it the right way to upload? It won’t harm me because it’s not a normal upload, with form input etc..?

Well, the only difference I see is that you will always have to use ajax. Besides, with input, usually in the upload submission, the file name is sent, different from the blob, that does not have the name of the source file, but that in the case could be solved in a simple way: Placing the third parameter in the call of .append:

  data.append('imagem', blob, 'imagem.jpg')

Moreover, there are no "problems", but differences.

Answer 2

How to upload this to the PHP server using jQuery?

First you need a file .php with function to decode the 64 base string of the image to add it in a file on the server. Then you request or post data to that file .php, with the image in Base64. Success.

~~ Example ~~

jQuery :

$.post({

    data: {

        // Manda a imagem em base 64
        base64: canvas.toDataURL()

    },

    // O arquivo .php com a função citada
    url: "addimage.php"

});

PHP :

<?php


    // Ignora todos os caracters até a primeira vírgula depois de ";" (semicolon)

    $png = substr(
                $_POST['base64'],
                strpos($_POST['base64'], ";") + 1
    );

    $png = substr(
                $png,
                strpos($png, ",") + 1
    );

    // Cria (ou substitui, caso existente) a imagem no servidor
    file_put_contents('img.png', base64_decode($_POST['base_64']));

?>

Is it the right way to upload? It won’t harm me because it’s not a normal upload, with form input etc..?

It is common to send data encrypted with Base64. If your string is too gigantic it may slow down on the server, but this is rare and difficult to do.