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

Question

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

Tôi đang sử dụng

var strDataURI = oCanvas.toDataURL(); 

Kết quả là cơ sở mã hóa 64 hình ảnh. Làm thế nào tôi có thể 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ó poosible không?
Nếu không thì đó có thể là giải pháp để tải hình ảnh trên canvas?

Answer 1

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

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

Các drawImage() method 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; 

Sửa: Tôi trước đây gợi ý trong không gian này mà nó có thể không cần phải sử dụng các handler onload khi một dữ liệu URI được tham gia. Dựa trên các thử nghiệm thực nghiệm từ this question, 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 và sau đó đặt src —cần thiết để một số trình duyệt chắc chắn sử dụng kết quả.

Answer 2

trong javascript, sử dụng jquery để lựa chọn vải 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> 

Answer 3

Có lẽ fiddle 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); 

Answer 4

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