Zeichnen eines Bildes von einer Daten-URL auf eine Zeichenfläche

Wie kann ich ein Bild in einer Leinwand öffnen? welches verschlüsselt ist

Ich benutze die

var strDataURI = oCanvas.toDataURL(); 

Die Ausgabe 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 möglich?
Wenn nicht, was kann dann die Lösung sein, um das Bild auf eine Leinwand zu laden?

Wenn Sie eine Daten-URL angeben, können Sie ein Bild erstellen (entweder auf der Seite oder nur in JS), indem Sie srcdas Bild auf Ihre Daten-URL setzen. Beispielsweise:

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

Mit der drawImage()Methode von HTML5 Canvas Context können Sie ein Bild (oder eine Leinwand oder ein Video) ganz oder teilweise auf eine Leinwand kopieren.

Sie könnten es so verwenden:

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 der onloadHandler möglicherweise nicht verwendet werden muss, wenn ein Daten-URI beteiligt ist. Basierend auf experimentellen Tests aus dieser Frage ist dies nicht sicher. Die obige Sequenz - Erstellen Sie das Bild, stellen Sie die ein onload, um das neue Bild zu verwenden, und stellen Sie dann die ein src- ist für einige Browser erforderlich, um die Ergebnisse sicher zu verwenden.

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

Vielleicht würde diese Geige ThumbGen - jsFiddle helfen. Sie verwendet die 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);

Möglicherweise möchten Sie das alte Bild löschen, bevor Sie ein neues Bild festlegen.

Sie müssen auch die Leinwandgröße für ein neues Bild aktualisieren.

So mache ich es in meinem Projekt:

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

Verwenden Sie in Javascript 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>