Frage Zeichnen eines Bilds von einer Daten-URL zu einer Arbeitsfläche


Wie kann ich ein Bild in einem Canvas öffnen? welches codiert ist

Ich benutze die

var strDataURI = oCanvas.toDataURL(); 

Die Ausgabe ist das codierte Basis-64-Bild. Wie kann ich dieses Bild auf einer Leinwand zeichnen?

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


75
2018-01-23 13:07


Ursprung


Antworten:


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

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

Das drawImage() Methode Mit HTML5-Canvas-Kontext können Sie ein Bild (oder eine Leinwand oder ein Video) ganz oder teilweise auf eine Leinwand kopieren.

Du könntest es so benutzen:

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 Raum vorgeschlagen, dass es nicht notwendig sein könnte, das zu verwenden onload Handler, wenn ein Daten-URI beteiligt ist. Basierend auf experimentellen Tests von diese FrageEs ist nicht sicher, dies zu tun. Die obige Sequenz - Erstellen Sie das Bild, legen Sie die onload um das neue Bild zu verwenden, und dann setze die src- Einige Browser müssen die Ergebnisse sicher verwenden.


139
2018-01-23 20:43



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

8
2017-11-27 11:00



Vielleicht würde diese Geige helfen ThumbGen - jsFiddle Es verwendet Datei-API und Canvas, um Miniaturansichten von Bildern dynamisch 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);

2
2017-08-11 13:45



in javascript mit 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>

-2
2018-01-23 14:25