JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<img id="img" src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

<input type="button" value="salvar" id="btnSalvar"/>
<input type="button" value="Ver" id="btnVer"/>

JavaScript

$('#btnSalvar').click(function(){
    var srcImagem =  document.getElementById('img');

    getImageDataURL(srcImagem.src, onSuccess, onError);

});
 var onSuccess = function(e){
  document.body.appendChild(e.image);
  alert(e.data);
 };
 
 var onError = function(e){
  console.log(e.message);
 };

function getImageDataURL(url, success, error) {
    var data, canvas, ctx;
    var img = new Image();
    img.onload = function(){
        // Create the canvas element.
        canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        // Get '2d' context and draw the image.
        ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        // Get canvas data URL
        try{
            data = canvas.toDataURL();
            success({image:img, data:data});
        }catch(e){
            error(e);
        }
    }
    // Load image URL.
    try{
        img.src = url;
    }catch(e){
        error(e);
    }
}


$('#btnVer').click(function(){
 var picture = localStorage.getItem('image');
 var image = document.createElement('img');
 image.src = picture;
 document.body.appendChild(image);
    console.log(image);
});
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}