데이터 URL에서 캔버스로 이미지 그리기

Question

Canvas에서 이미지를 열려면 어떻게해야합니까? 제가

var strDataURI = oCanvas.toDataURL(); 

출력을 사용하고

인코딩하는 것은 인코딩 된베이스 (64) 이미지이다. 이 이미지를 어떻게 캔버스에 그릴 수 있습니까?

strDataURI을 사용하고 이미지를 만들고 싶습니까? 그것은 가벼운가?
그렇다면 캔버스에 이미지를로드하기위한 해결책은 무엇일까요? 캔버스 ID 선택을위한 jQuery를 사용하여 자바 스크립트

Answer 1

데이터 URL, 당신은 (페이지 또는 순수 JS에서 하나) 이미지를 만들 수 있습니다 감안할 때 이미지의 src을 데이터 URL로 설정하면됩니다. 예를 들어 :

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

는 HTML5 캔버스 컨텍스트의 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 File API와 Canvas를 사용하여 이미지의 축소판을 동적으로 생성합니다.

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