JSFiddle - React, Tailwind, and code Playground

by vaxilart

HTML

<img src="http://www.alsacreations.com/css/img/logo-alsacreations-com.png" alt="Alsacréations" id="monImage" />

<div id="resultat"></div>

JavaScript

// imgReference est le noeud DOM d'une balise img
function getDataURI(imgReference) {
    var canvas    = document.createElement("canvas"),
        context   = canvas.getContext("2d"),
        extension = imgReference.src.split(".").pop()
        ;

    // Donnons la même largeur et hauteur à notre élément canvas
    canvas.width  = imgReference.width;
    canvas.height = imgReference.height;

    // Nous dessinons notre image au sein de l'élément canvas
    context.drawImage(imgReference, 0, 0, imgReference.width, imgReference.height);

    // Nous retournons notre élément en tant que data-URI
    return canvas.toDataURL("image/" + extension);
}

// utilisation
$(function () {
    var imgDataURI = getDataURI( document.getElementById('monImage') );
    document.getElementById('resultat').innerHTML = imgDataURI;
});