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

112

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?

Yahoo
quelle
In diesem Fall funktioniert es
arqam

Antworten:

194

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.

Phrogz
quelle
5
Die Verwendung des Onload-Handlers ist auf jeden Fall eine gute Idee. Das Laden des Bildes kann eine Weile dauern, daher ist es besser, auf Nummer sicher zu gehen. :)
Juho Vepsäläinen
1
@bebraw Mal sehen, sicher auf: stackoverflow.com/questions/4776670/… :)
Phrogz
@Phrogz es gibt mir einen Fehler: var ctx = myCanvas.getContext ('2d'); Kopieren Sie einfach Ihren Code, um ihn zu testen
Jepser Bernardino,
@jepser Haben Sie canvasauf Ihrer Seite ein Element mit dieser ID? Haben Sie sichergestellt, dass dies myCanvasnicht null ist? Wenn Sie immer noch Probleme haben, stellen Sie Ihre eigene Frage oder besuchen Sie den JavaScript-Chat-Kanal .
Phrogz
@ DavidMurdoch Tolle Informationen. Haben Sie einen Chromium-Fehler, auf den Sie verlinken können, damit Benutzer wissen, wann die obige Aussage nicht mehr wahr ist?
Phrogz
11
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);
}
Raphael C.
quelle
2

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

quelle
0

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
      );
    };
Hitesh Sahu
quelle
-4

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>
user475434
quelle
1
Dies beantwortet nicht die Frage des OP in Bezug auf die dataURL.
Phrogz
7
Warum sollten Sie jQuery verwenden, um die Zeichenfläche auszuwählen? Ist die Eingabe von document.getElementById () zu viel Arbeit?
Scott
Dieser Code funktioniert, obwohl er nicht mit Frage zusammenhängt
Mohammad Ashfaq