How to get toDataURL to save in a sessionStorage?

Question

I’m using a library I picked up here at this link: https://github.com/fengyuanchen/cropper

Only I already spent 2 days testing and looking for how to get the image cut with toDataURL to catch the Base64 and save it in a sessionStorage for me to use later..

If anyone can give me a hand... Thank you

Answer 1

You can try it this way:

var canvas = $(img_selector).cropper('getCroppedCanvas'); //pega o canvas
var data = canvas.toDataURL('image/jpeg'); //gera a base64 com o mimetype
var base64 = data.split(',').reverse()[0]; //pega somente o código
sessionStorage.setItem("base64", base64); //salva na storage

You can call this piece of code at specific times:

When Crop is finished:

$(img_selector).on('cropend.cropper', function (e) {
    var $cropper = $(e.target);
    var canvas = $cropper.cropper('getCroppedCanvas');
    [...]
    // cole o resto do código aqui
});

When the cropbox is changing:

$(img_selector).on('cropmove.cropper', function (e) {
    var $cropper = $(e.target);
    var canvas = $cropper.cropper('getCroppedCanvas');
    [...]
    // cole o resto do código aqui
});

Other plugin events can be found here.