캔버스 요소에 blob을 렌더링하는 방법은 무엇입니까?

Question

이미지 blob을 캔버스 요소에 렌더링하는 방법은 무엇입니까?

지금까지 내가, 이미지를 캡처 한방울로 변환 결국 in this codepen, it just returns the default black image.

var canvas = document.getElementById('canvas'); 
var input = document.getElementById('input'); 
var ctx = canvas.getContext('2d'); 
var photo; 


function picToBlob() { 
    var file = input.files[0]; 

    canvas.toBlob(function(blob) { 
    var newImg = document.createElement("img"), 
     url = URL.createObjectURL(blob); 

    newImg.onload = function() { 
     ctx.drawImage(this, 0, 0); 
     photo = blob; 
     URL.revokeObjectURL(url); 
    }; 

    newImg.src = url; 
    }, file.type, 0.5); 

    canvas.renderImage(photo); 
} 

HTMLCanvasElement.prototype.renderImage = function(blob) { 

    var canvas = this; 
    var ctx = canvas.getContext('2d'); 
    var img = new Image(); 

    img.onload = function() { 
    ctx.drawImage(img, 0, 0) 
    } 
    img.src = URL.createObjectURL(blob); 
} 

input.addEventListener('change', picToBlob, false); 

Answer 1

나는 당신이 당신의 코드를 정리할 필요가 있다고 생각 캔버스에 방울을 렌더링하기 위해 두 (간체) 기능을 가지고 있습니다 약간. 불필요한 코드 줄이 많이 있기 때문에 달성하려는 것을 알기가 어렵습니다. 가장 큰 문제는 blob가 정의되지 않은 여기에오고있다 photo 여기에 당신이 달성하려고하는 것을 위해 필요하다 toBlob 기능 ... 내부 초기화 결코 극복

HTMLCanvasElement.prototype.renderImage = function(blob){ 

때문이다.

여기

var canvas = document.getElementById('canvas'); 
 
var input = document.getElementById('input'); 
 

 

 
    function picToBlob() { 
 
    canvas.renderImage(input.files[0]); 
 
    } 
 

 
HTMLCanvasElement.prototype.renderImage = function(blob){ 
 
    
 
    var ctx = this.getContext('2d'); 
 
    var img = new Image(); 
 

 
    img.onload = function(){ 
 
    ctx.drawImage(img, 0, 0) 
 
    } 
 

 
    img.src = URL.createObjectURL(blob); 
 
}; 
 

 
input.addEventListener('change', picToBlob, false);

<input type = 'file' accept = 'image' capture = 'camera' id = 'input'> 
 
<canvas id = 'canvas'></canvas>

이

이 비동기 당신은 당신이 당신의`canvas.renderImage`에 (그것을 그릴 canvas.toBlob`before`호출