Bir resimden URL'ye tuval çizim Çizim

Question

Tuvalde resmi nasıl açabilirim? Ben

var strDataURI = oCanvas.toDataURL(); 

çıkışını kullanıyorum

kodlanmış olan kodlanmış taban 64 görüntüdür. Bu resmi tuval üzerine nasıl çizebilirim?

strDataURI kullanmak ve resmi oluşturmak mı istiyorsunuz? Bu zehirli mi?
Eğer değilse, görüntü bir tuval üzerine yüklemek için çözüm olabilir mi? tuval kimliği seçimi için jquery kullanarak javascript

Answer 1

veri URL'sini değiştirmek (sayfasındaki veya tamamen JS ya) bir görüntü oluşturabilir Verilen Resmin src'unu veri URL'nize ayarlayarak. Örneğin:

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

HTML5 Canvas Bağlam drawImage() method bir tuval üzerine tümünü veya bir görüntü (ya tuval veya video) bir kısmını kopyalama sağlar.

Öyle gibi kullanabilirsiniz olabilir:

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; 

Düzenleme: Daha önce bir veri URI söz konusu olduğunda onload işleyicisi kullanmak gerekli olmayabilir bu alanda önerdi. this question den deneysel testlere dayanarak, bunu yapmak güvenli değildir. Yukarıdaki sıra - görüntüyü oluşturun, yeni görüntüyü kullanmak için onload ve ve ayarlarını yapın, bazı tarayıcıların sonuçları mutlaka kullanması için gerekli olan .

Answer 2

:

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

Belki bu keman, ThumbGen - jsFiddle yardımcı olur. Görüntülerin küçük resimlerini dinamik olarak oluşturmak için Dosya API'sini ve Tuval'i kullanır.

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