Как визуализировать blob на элементе холста?

Question

Как сделать кадр изображения элементом холста?

До сих пор у меня есть эти два (упрощенная) функция для захвата изображения, преобразовать его в сгусток и в конечном итоге оказывает пятно на холсте 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 приходит неопределенными здесь

HTMLCanvasElement.prototype.renderImage = function(blob){ 

photo потому, что никогда не будет инициализирован здесь внутри toBlob функции ..., которая не нужна для того, что вы пытаетесь достичь.

Вот упрощенный рабочий вариант фрагмент кода

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>