web-dev-qa-db-fra.com

Dessiner une image d'une URL de données sur une toile

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

J'utilise le

var strDataURI = oCanvas.toDataURL();

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

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

imagehtml5canvasdata-uri
92
Yahoo

Avec une URL de données, vous pouvez créer une image (sur la page ou uniquement en JS) en définissant le src de l'image sur votre URL de données. Par exemple:

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

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

Vous pourriez 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 déjà suggéré dans cet espace qu'il n'était peut-être pas nécessaire d'utiliser le gestionnaire onload quand un URI de données est impliqué. Basé sur des tests expérimentaux de cette question , il n’est pas prudent de le faire. La séquence ci-dessus - créer l'image, configurer le onload pour utiliser la nouvelle image et alors définir le src est nécessaire à certains navigateurs pour utiliser sûrement Les resultats.

165
Phrogz
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);
}
9
Raphael C

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);
2
user2672373