Menggambar gambar dari URL data ke kanvas


112

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?


Ini tidak berfungsi dalam kasus ini :: jsfiddle.net/V92Gn/5376
arqam

Jawaban:


194

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.


5
Menggunakan onload handler jelas merupakan ide yang bagus. Mungkin perlu beberapa saat untuk memuat gambar jadi lebih baik bermain aman. :)
Juho Vepsäläinen

1
@bebraw Mari kita lihat dengan pasti: stackoverflow.com/questions/4776670/… :)
Phrogz

@Phrogz memberi saya kesalahan: var ctx = myCanvas.getContext ('2d'); cukup salin /
tempel

@jepser Apakah Anda memiliki canvaselemen pada halaman Anda dengan id itu? Sudahkah Anda memastikan bahwa myCanvasitu bukan nol? Jika Anda masih mengalami masalah, posting pertanyaan Anda sendiri, atau kunjungi saluran obrolan JavaScript .
Phrogz

@Davidurdoch Informasi yang bagus. Apakah Anda memiliki bug Chromium yang dapat Anda tautkan, sehingga pengguna akan tahu ketika pernyataan di atas tidak lagi benar?
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);
}

2

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

0

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

-4

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>

1
Ini tidak menjawab pertanyaan OP terkait dengan dataURL.
Phrogz

7
Mengapa Anda menggunakan jQuery untuk memilih kanvas? Apakah mengetik document.getElementById () terlalu merepotkan?
Scott

Kode ini berfungsi, meskipun tidak terkait dengan pertanyaan
Mohammad Ashfaq
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.