Save drawing from canvas to Local folder

StackOverflow https://stackoverflow.com/questions/21927322

Question

I'm developing a web application with signature capture and storage functionality. I have done the image catering using canvas drawing.

Here is my code:

<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>

I want to store the signature image to my local folder. Can anybody suggest a way to do this ? Thanks for any suggestion.

Was it helpful?

Solution

I'd recommend using something like FileSaver.js to get the most cross browser solution.

For Chrome and Firefox you can use something like this:

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

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

Note: you could set the download attribute statically in the HTML as well.

For IE you can use a vendor specific msSaveBlobAs() method. More info on that here: http://msdn.microsoft.com/en-us/library/ie/hh779016(v=vs.85).aspx

Again one of the best cross browser solutions is FileSaver.js found here: https://github.com/eligrey/FileSaver.js/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top