Menggambar gambar dari URL data ke kanvas

Bagaimana saya bisa membuka gambar di kanvas? yang dikodekan

Saya menggunakan

var strDataURI = oCanvas.toDataURL(); 

Outputnya adalah gambar base 64 yang dikodekan. Bagaimana cara menggambar gambar ini di atas kanvas?

Saya ingin menggunakan strDataURI dan membuat Image? Apakah itu poosible?
Jika tidak, maka apa solusi yang mungkin bisa menjadi solusi untuk memuat gambar di atas kanvas?

Diberikan URL data, Anda dapat membuat gambar (baik di halaman atau murni di JS) dengan menyetel srcgambar ke URL data Anda. Sebagai contoh:

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

The drawImage()Metode HTML5 Canvas Konteks memungkinkan Anda menyalin semua atau sebagian dari suatu gambar (atau kanvas, atau video) ke atas kanvas.

Anda mungkin menggunakannya seperti ini:

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;

Sunting : Saya sebelumnya menyarankan di ruang ini bahwa mungkin tidak perlu menggunakan onloadpenangan saat URI data terlibat. Berdasarkan uji eksperimental dari pertanyaan ini , tidak aman untuk melakukannya. Urutan di atas — buat gambar, setel onloaduntuk menggunakan gambar baru, lalu setel src—diperlukan untuk beberapa browser agar pasti menggunakan hasilnya.

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

Mungkin biola ini akan membantu ThumbGen - jsFiddle Ini menggunakan File API dan Canvas untuk membuat thumbnail gambar secara dinamis.

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

Anda mungkin ingin menghapus Gambar lama sebelum menyetel Gambar baru.

Anda juga perlu memperbarui ukuran Kanvas untuk Gambar baru.

Inilah yang saya lakukan dalam proyek saya:

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

dalam javascript, menggunakan jquery untuk pemilihan id kanvas:

 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>