データURLからキャンバスへの画像の描画

Question

キャンバスで画像を開くにはどうすればよいですか？私は

var strDataURI = oCanvas.toDataURL(); 

出力を使用してい

をエンコードすることは符号化されたベース64の画像です。この画像をキャンバスにどのように描くことができますか？

私はstrDataURIを使用してイメージを作成しますか？それは可愛いですか？
もしそうでなければ、画像をキャンバスに読み込むための解決策は何でしょうか？キャンバスのIDを選択するためのjQueryを使用してJavaScriptで

Answer 1

データURLは、あなたが（ページまたは純粋にJSのいずれか）の画像を作成することができます考えますイメージのsrcをデータURLに設定します。たとえば：HTML5のCanvasコンテキストの

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

drawImage() methodはキャンバスにあなたがすべて、または画像（またはキャンバス、またはビデオ）の一部をコピーすることができます。

あなたはそうのようにそれを使用することがあります：

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; 

編集：私は以前にデータURIが含まれているときonloadハンドラを使用する必要はないかもしれないことを、この空間に提案しました。 this questionからの実験的テストに基づいて、それを行うことは安全ではない。上記のシーケンス - イメージを作成し、新しいイメージを使用するようにonloadを設定し、を入力してをsrcに設定すると、一部のブラウザで必ずその結果を使用する必要があります。

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

おそらくこのフィドルは役に立ちますThumbGen - jsFiddleファイルAPIとキャンバスを使用して画像のサムネイルを動的に生成します。

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