Dessiner une image à partir d'une URL de données vers un canevas

Comment ouvrir une image dans un canevas? qui est encodé

J'utilise le

var strDataURI = oCanvas.toDataURL(); 

La sortie est l'image encodée en base 64. Comment dessiner cette image sur une toile?

Je veux utiliser strDataURI et créer l'image? Est-ce poosible?
Si ce n'est pas le cas, quelle peut être la solution pour charger l'image sur une toile?

Étant donné une URL de données, vous pouvez créer une image (sur la page ou purement dans JS) en définissant le srcde l'image sur votre URL de données. Par exemple:

var img = new Image;
img.src = strDataURI;

La drawImage()méthode HTML5 Canvas Context vous permet de copier tout ou une partie d'une image (ou d'un canevas ou d'une vidéo) sur un canevas.

Vous pouvez l'utiliser comme ceci:

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = strDataURI;

Edit : J'ai précédemment suggéré dans cet espace qu'il pourrait ne pas être nécessaire d'utiliser le onloadgestionnaire lorsqu'un URI de données est impliqué. Sur la base des tests expérimentaux de cette question , il n'est pas sûr de le faire. La séquence ci-dessus - créer l'image, définir le onloadpour utiliser la nouvelle image, puis définir la src- est nécessaire pour que certains navigateurs utilisent sûrement les résultats.

function drawDataURIOnCanvas(strDataURI, canvas) {
    "use strict";
    var img = new window.Image();
    img.addEventListener("load", function () {
        canvas.getContext("2d").drawImage(img, 0, 0);
    });
    img.setAttribute("src", strDataURI);
}

Peut-être que ce violon aiderait ThumbGen - jsFiddle Il utilise File API et Canvas pour générer dynamiquement des vignettes d'images.

(function (doc) {
    var oError = null;
    var oFileIn = doc.getElementById('fileIn');
    var oFileReader = new FileReader();
    var oImage = new Image();
    oFileIn.addEventListener('change', function () {
        var oFile = this.files[0];
        var oLogInfo = doc.getElementById('logInfo');
        var rFltr = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i
        try {
            if (rFltr.test(oFile.type)) {
                oFileReader.readAsDataURL(oFile);
                oLogInfo.setAttribute('class', 'message info');
                throw 'Preview for ' + oFile.name;
            } else {
                oLogInfo.setAttribute('class', 'message error');
                throw oFile.name + ' is not a valid image';
            }
        } catch (err) {
            if (oError) {
                oLogInfo.removeChild(oError);
                oError = null;
                $('#logInfo').fadeOut();
                $('#imgThumb').fadeOut();
            }
            oError = doc.createTextNode(err);
            oLogInfo.appendChild(oError);
            $('#logInfo').fadeIn();
        }
    }, false);
    oFileReader.addEventListener('load', function (e) {
        oImage.src = e.target.result;
    }, false);
    oImage.addEventListener('load', function () {
        if (oCanvas) {
            oCanvas = null;
            oContext = null;
            $('#imgThumb').fadeOut();
        }
        var oCanvas = doc.getElementById('imgThumb');
        var oContext = oCanvas.getContext('2d');
        var nWidth = (this.width > 500) ? this.width / 4 : this.width;
        var nHeight = (this.height > 500) ? this.height / 4 : this.height;
        oCanvas.setAttribute('width', nWidth);
        oCanvas.setAttribute('height', nHeight);
        oContext.drawImage(this, 0, 0, nWidth, nHeight);
        $('#imgThumb').fadeIn();
    }, false);
})(document);

Vous voudrez peut-être effacer l'ancienne image avant de définir une nouvelle image.

Vous devez également mettre à jour la taille du canevas pour une nouvelle image.

Voici comment je fais dans mon projet:

    // on image load update Canvas Image 
    this.image.onload = () => {

      // Clear Old Image and Reset Bounds
      canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.canvas.height = this.image.height;
      this.canvas.width = this.image.width;

      // Redraw Image
      canvasContext.drawImage(
        this.image,
        0,
        0,
        this.image.width,
        this.image.height
      );
    };

en javascript, en utilisant jquery pour la sélection de l'identifiant du canevas:

 var Canvas2 = $("#canvas2")[0];
        var Context2 = Canvas2.getContext("2d");
        var image = new Image();
        image.src = "images/eye.jpg";
        Context2.drawImage(image, 0, 0);

html5:

<canvas id="canvas2"></canvas>