Рисунок на HTML5 с использованием

Question

У меня есть изображение, и я хочу, чтобы его можно было нарисовать. Я знаю, как рисовать на холсте, но моя главная проблема заключается в том, что в настоящее время, когда я нажимаю на изображение, это не холст, а изображение. Как я могу получить холст поверх изображения, чтобы рисовать на нем?

У меня есть это в моем HTML:

<div class="image"> 
    <img src="http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Bart" class="img-responsive"/> 
    <canvas></canvas> 
    <div class="caption text-center">Bart Simpson</div> 
</div> 

Answer 1

То, что вы хотите сделать, это ждать, пока загрузится изображение. Используйте drawImage и нарисуйте его на своем холсте. Затем сделайте все, что вы хотите сделать с вашим холстом. Наконец, вы можете экспортировать холст снова toDataURL и установить источник образа

var imageNode = document.getElementById('image'); 
 
var image = new Image(); 
 
image.src = "http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png"; 
 
image.onload = function() { 
 
\t var canvas = document.getElementById('imageCanvas'); 
 
\t canvas.width = image.width; 
 
\t canvas.height = image.height; 
 
\t var ctx = canvas.getContext('2d'); 
 
\t ctx.drawImage(image, 0, 0); 
 

 
\t // Do something like painting a green hat 
 
\t ctx.moveTo(35, 50); 
 
\t ctx.lineTo(85, 10); 
 
\t ctx.lineTo(135, 50); 
 
\t ctx.closePath(); 
 
\t ctx.fillStyle = "#009900"; 
 
\t ctx.fill(); 
 

 
\t var dataURL = canvas.toDataURL(); 
 
\t imageNode.src = dataURL; 
 
}

#image { 
 
    display: none; 
 
}

\t <img src="http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Bart" id="image" class="img-responsive" /> 
 
<canvas id="imageCanvas"></canvas>