キャンバス要素に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に変換し、最終的にキャンバスにブロブをレンダリングするために、これらの2つ（簡体字）の機能を持っている私はあなたのコードを整理する必要があると思います少し。不必要なコード行がたくさんあるので、達成しようとしていることを知るのは難しいです。主な問題は、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>