Vẽ hình ảnh từ URL dữ liệu vào canvas

Làm cách nào để mở một hình ảnh trong Canvas? được mã hóa

Tôi đang sử dụng

var strDataURI = oCanvas.toDataURL(); 

Đầu ra là hình ảnh cơ sở 64 được mã hóa. Làm cách nào để vẽ hình ảnh này trên canvas?

Tôi muốn sử dụng strDataURI và tạo Hình ảnh? Nó có khả thi không?
Nếu không thì đâu có thể là giải pháp để tải hình ảnh trên canvas?

Với URL dữ liệu, bạn có thể tạo hình ảnh (trên trang hoặc hoàn toàn bằng JS) bằng cách đặt srchình ảnh thành URL dữ liệu của bạn. Ví dụ:

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

Các drawImage()phương pháp của HTML5 Canvas Bối cảnh cho phép bạn sao chép toàn bộ hoặc một phần của một hình ảnh (hoặc vải, hoặc video) lên một tấm toan.

Bạn có thể sử dụng nó như vậy:

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;

Chỉnh sửa : Trước đây tôi đã đề xuất trong không gian này rằng có thể không cần sử dụng onloadtrình xử lý khi có liên quan đến URI dữ liệu. Dựa trên các thử nghiệm thực nghiệm từ câu hỏi này , nó không an toàn để làm như vậy. Trình tự trên — tạo hình ảnh, đặt onloadđể sử dụng hình ảnh mới, rồi đặt src— điều cần thiết cho một số trình duyệt để chắc chắn sử dụng kết quả.

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

Có lẽ trò chơi này sẽ giúp ThumbGen - jsFiddle Nó sử dụng API tệp và Canvas để tạo động các hình thu nhỏ của hình ảnh.

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

Bạn có thể muốn xóa Hình ảnh cũ trước khi đặt Hình ảnh mới.

Bạn cũng cần cập nhật kích thước Canvas cho Hình ảnh mới.

Đây là cách tôi đang làm trong dự án của mình:

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

trong javascript, sử dụng jquery để lựa chọn id canvas:

 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>