Pertanyaan 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 dasar 64 yang dikodekan. Bagaimana saya bisa menggambar gambar ini di atas kanvas?

Saya ingin menggunakan strDataURI  dan membuat Gambar? Apakah itu enak?
Jika tidak maka apa yang mungkin bisa menjadi solusi untuk memuat gambar pada kanvas?


75
2018-01-23 13:07


asal


Jawaban:


Dengan memberikan URL data, Anda dapat membuat gambar (baik di halaman atau murni di JS) dengan mengatur src gambar ke URL data Anda. Sebagai contoh:

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

Itu drawImage() metode dari HTML5 Canvas Context memungkinkan Anda menyalin semua atau sebagian gambar (atau kanvas, atau video) ke 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;

Edit: Saya sebelumnya menyarankan di ruang ini bahwa mungkin tidak perlu menggunakan onload handler ketika data URI terlibat. Berdasarkan uji eksperimental dari pertanyaan ini, tidak aman untuk melakukannya. Urutan di atas — buat gambar, atur onload untuk menggunakan gambar baru, dan kemudian mengatur src- diperlukan untuk beberapa browser untuk pasti menggunakan hasil.


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



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

(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



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>

-2
2018-01-23 14:25