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

Canvas에서 이미지를 어떻게 열 수 있습니까? 인코딩 된

나는

var strDataURI = oCanvas.toDataURL(); 

출력은 인코딩 된 base 64 이미지입니다. 이 이미지를 캔버스에 어떻게 그릴 수 있습니까?

를 사용 strDataURI 하고 이미지를 만들고 싶습니다 . 그것은 poosible입니까?
그렇지 않다면 캔버스에 이미지를로드하는 솔루션은 무엇일까요?

데이터 URL이 주어지면 src이미지를 데이터 URL 로 설정 하여 이미지를 만들 수 있습니다 (페이지에서 또는 순수하게 JS로) . 예를 들면 :

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

HTML5 Canvas Context 의 drawImage()방법 을 사용하면 이미지 (또는 캔버스 또는 비디오)의 전체 또는 일부를 캔버스에 복사 할 수 있습니다.

다음과 같이 사용할 수 있습니다.

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;

편집 : 이전에이 공간 onload에서 데이터 URI가 관련되어있을 때 핸들러 를 사용할 필요가 없을 수도 있다고 제안했습니다 . 이 질문의 실험적 테스트에 따르면 그렇게하는 것은 안전하지 않습니다. 위의 순서 (이미지를 만들고 onload새 이미지를 사용 하도록를 설정 한 다음 설정)는 src일부 브라우저에서 결과를 확실히 사용하는 데 필요합니다.

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

아마도이 바이올린은 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);

새 이미지를 설정하기 전에 이전 이미지를 지우고 싶을 수 있습니다.

새 이미지의 캔버스 크기도 업데이트해야합니다.

이것은 내 프로젝트에서 내가하는 방법입니다.

    // on image load update Canvas Image 
    this.image.onload = () => {

      // Clear Old Image and Reset Bounds
      canvasContext.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.canvas.height = this.image.height;
      this.canvas.width = this.image.width;

      // Redraw Image
      canvasContext.drawImage(
        this.image,
        0,
        0,
        this.image.width,
        this.image.height
      );
    };

javascript에서 캔버스 ID 선택을 위해 jquery 사용 :

 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>