Disegnare un’immagine da un URL di dati a una canvas

Come posso aprire un’immagine in una canvas? che è codificato

Sto usando il

var strDataURI = oCanvas.toDataURL(); 

L’output è l’immagine di base 64 codificata. Come posso disegnare questa immagine su una canvas?

Voglio usare strDataURI e creare l’immagine? È ansible?
Se non è allora quale può essere la soluzione per caricare l’immagine su una canvas?

Dato un URL di dati, è ansible creare un’immagine (sulla pagina o esclusivamente in JS) impostando l’immagine dell’immagine nel proprio URL di dati. Per esempio:

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

Il metodo drawImage() di HTML5 Canvas Context consente di copiare tutto o una parte di un’immagine (o canvas o video) su una canvas.

Potresti usarlo in questo modo:

 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; 

Modifica : in precedenza ho suggerito in questo spazio che potrebbe non essere necessario utilizzare il gestore onload quando è coinvolto un URI di dati. Sulla base di test sperimentali da questa domanda , non è sicuro farlo. La sequenza precedente: crea l’immagine, imposta l’ onload per usare la nuova immagine, quindi imposta lo src -è necessario che alcuni browser usino sicuramente i risultati.

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

Forse questo violino potrebbe aiutare ThumbGen – jsFiddle Utilizza File API e Canvas per generare dynamicmente miniature di immagini.

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

in javascript, utilizzando jquery per la selezione dell’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: