Сохранить рисунок с холста в локальную папку

Я занимаюсь разработкой веб-приложения с функциями захвата и хранения подписи. Я сделал кейтеринг изображений, используя рисунок на холсте.

Вот мой код:

<html>  
<head>  
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        .btn {
            padding: 10px;
            position: absolute;
            /*top: 5px;*/
            left: 1130px;
        }
        .img {
            padding: 10px;
            width: 300px;
            height: 300px;
            position: absolute;
            background-color: white;
            top: 50px;
            left: 1100px;
        }
        .btn2 {
            padding: 10px;
            position: absolute;
            /*top: 5px;*/
            left: 1180px;
        }
    </style>
    <meta charset="UTF-8">
    <script src="js/signature.js"></script>

    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
    <canvas id="cbook" width=1100 height=732> </canvas>
    <div id="bottext"><b></b> draw signature here</div>
    <div id="toptext">signature capture - test </div>
    <div><input type="button" id="clear" class="btn" value="Clear">
        <input type="button" id="save" class="btn2" value="Save"></div>
    <img id="canvasImg" class="img" alt="Right click to save me!">
    <script>
        var canvas = document.getElementById('cbook');
        var context = canvas.getContext('2d');
        // bind event handler to clear button
        document.getElementById('clear').addEventListener('click', function() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }, false);
        document.getElementById('save').addEventListener('click', function() {
            // save canvas image as data url (png format by default)
            var dataURL = canvas.toDataURL();
            alert("");
            // set canvasImg image src to dataURL
            // so it can be saved as an image
            document.getElementById('canvasImg').src = dataURL;
        }, false);
    </script>
</body>

Я хочу сохранить изображение подписи в моей локальной папке. Кто-нибудь может предложить способ сделать это? Спасибо за любое предложение.

Источник

1 ответ

Решение

Я бы рекомендовал использовать что-то вроде FileSaver.js, чтобы получить наиболее кросс-браузерное решение.

Для Chrome и Firefox вы можете использовать что-то вроде этого:

var downloadLink = document.getElementById('my-anchor-tag');

downloadLink.href = dataURL;
downloadLink.setAttribute('download', 'file-name.png');

Примечание: вы также можете установить атрибут загрузки статически в HTML.

Для IE вы можете использовать специфический для поставщика метод msSaveBlobAs(). Подробнее об этом здесь: http://msdn.microsoft.com/en-us/library/ie/hh779016(v=vs.85).aspx

Опять же, одним из лучших кросс-браузерных решений является FileSaver.js, найденный здесь: https://github.com/eligrey/FileSaver.js/

Источник
Другие вопросы по тегам