Dessin d'une image à partir d'une URL de données sur une toile

Question

Comment puis-je ouvrir une image dans une toile? qui est codée

J'utilise le

var strDataURI = oCanvas.toDataURL(); 

La sortie est l'image de base 64 codé. Comment puis-je dessiner cette image sur une toile?

Je veux utiliser la strDataURI et créer l'image? Est-il poosible?
Si ce ne est pas alors ce que peut être la solution pour charger l'image sur une toile?

Answer 1

Étant donné une URL de données, vous pouvez créer une image (soit sur la page ou purement JS) en réglant le src de l'image à l'URL de votre données. Par exemple:

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

méthode drawImage() du contexte HTML5 Canvas vous permet de copier la totalité ou une partie d'une image (ou une toile, ou vidéo) sur une toile.

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;

Modifier : je l'ai déjà suggéré dans cet espace qu'il pourrait ne pas être nécessaire d'utiliser le gestionnaire de onload quand est impliqué un URI de données. Sur la base des essais expérimentaux de cette question , il est dangereux de le faire. La séquence à créer l'image ci-dessus, réglez le onload d'utiliser la nouvelle image, et puis définir la src est nécessaire, pour certains navigateurs à utiliser sûrement les résultats.

Answer 2

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);
}

Answer 3

Peut-être ce violon aiderait ThumbGen - jsFiddle Il utilise l'API de fichiers et Canvas pour générer dynamiquement des vignettes de 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);

Answer 4

en javascript, jquery en utilisant pour la sélection id toile:

 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>