Marker.JS
Vamos falar do Marker.js, uma incrível biblioteca de anotações de imagens que permite inserir textos, incluir setas, destacar uma área e muito mais. É possível salvar e compartilhar as suas anotações.
O GitHub da biblioteca pode ser acessado clicando aqui e a documentação neste link.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Marker.js</title>
<script src="https://unpkg.com/markerjs"></script>
<script type="text/javascript">
function showMarkerJs(img) {
var mark = new markerjs.MarkerArea(img);
mark.show(function (dataUrl) {
// elemento que receberá a imagem com a anotação
var res = document.getElementById("resultado");
// atribui a imagem para o atributo src
res.src = dataUrl;
// gera um link para download
res.nextElementSibling.innerHTML = '<a href="' + dataUrl + '" id="link" download="novo_nome_da_imagem">Clique aqui para baixar</a>';
});
}
</script>
</head>
<body>
<br><br>
<figure>
<img src="sua_image.jpg" onclick="showMarkerJs(this);">
<figcaption><em>Clique na foto para iniciar as anotações.<br> Depois de feito as anotações clique em OK para finalizar.</em></figcaption>
</figure>
<figure>
<img src="" id="resultado">
<figcaption></figcaption>
</figure>
</body>
</html> |
Para ver uma demonstração do código, acesse aqui.
