Zeichnen Sie ein Bild von einer Daten -URL zu einer Leinwand

Question

Wie kann ich ein Bild in einer Leinwand öffnen? das ist codiert

Ich benutze das

var strDataURI = oCanvas.toDataURL(); 

Der Ausgang ist das codierte Basis 64 -Bild. Wie kann ich dieses Bild auf eine Leinwand zeichnen?

Ich möchte das verwenden strDataURI und das Bild erstellen? Ist es peinbar?
Wenn es nicht ist, was kann dann möglicherweise die Lösung für das Laden des Bildes auf einer Leinwand sein?

Answer 1

Bei einer Daten -URL können Sie ein Bild (entweder auf der Seite oder nur in JS) erstellen, indem Sie die festlegen src des Bildes zu Ihrer Daten -URL. Zum Beispiel:

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

Das drawImage() Methode Mit HTML5 -Canvas -Kontext können Sie alle oder einen Teil eines Bildes (oder Leinwand oder Video) auf eine Leinwand kopieren.

Sie könnten es so verwenden: so:

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;

Bearbeiten: Ich habe zuvor in diesem Bereich vorgeschlagen, dass es möglicherweise nicht notwendig ist, die zu verwenden onload Handler, wenn ein Daten -URI beteiligt ist. Basierend auf experimentellen Tests von diese Frage, Es ist nicht sicher, dies zu tun. Die obige Sequenz - das Bild erstellen, das festlegen, das festlegen onload das neue Bild verwenden und dann Setzen Sie die src- Ist für einige Browser erforderlich, um die Ergebnisse sicherlich zu verwenden.

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

Vielleicht würde diese Geige helfen Daumen - Jsfiddle Es verwendet Datei -API und Canvas, um dynamisch Miniaturansichten von Bildern zu generieren.

(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

In JavaScript verwenden Sie JQuery für die Auswahl der Canvas -ID:

 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>