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.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *