Rysowanie obrazu z adresu URL danych na kanwie

Question

Jak mogę otworzyć obraz na płótnie? kodowany

ja pomocą

var strDataURI = oCanvas.toDataURL(); 

Wyjście jest zakodowana podstawy 64 obrazu. Jak mogę narysować ten obraz na płótnie?

Chcę użyć strDataURI i utworzyć obraz? Czy to jest poosible?
Jeśli nie jest to, co może być rozwiązaniem do ładowania obrazu na płótnie?

Answer 1

Biorąc URL danych, można utworzyć obraz (zarówno na stronie lub wyłącznie w JS) ustawiając src obrazu na adres URL danych. Na przykład:

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

drawImage() method z HTML5 Canvas kontekst pozwala skopiować całość lub część obrazu (lub płótnie lub video) na płótnie.

Można używać go tak:

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: ja wcześniej sugerowano w tym miejscu, że może nie być konieczne, aby korzystać z obsługi onload gdy dane URI jest zaangażowana. W oparciu o testy eksperymentalne z this question, nie jest to bezpieczne. Powyższa sekwencja - utwórz obraz, ustaw onload, aby użyć nowego obrazu, a następnie , a następnie ustawić src - jest to konieczne, aby niektóre przeglądarki z pewnością korzystały z wyników.

Answer 2

w JavaScript, używając jQuery do wyboru płótno 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

Być może to skrzypce pomoże ThumbGen - jsFiddle Używa File API i Canvas, aby dynamicznie generować miniatury obrazów.

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