1

署名のキャプチャと保存機能を備えた Web アプリケーションを開発しています。キャンバス描画を使用して画像ケータリングを行いました。

これが私のコードです：

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

署名画像をローカル フォルダーに保存したいと考えています。誰でもこれを行う方法を提案できますか? 提案をありがとう。

4

1 に答える 1

2

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

ここでも、最適なクロス ブラウザー ソリューションの 1 つは、https ://github.com/eligrey/FileSaver.js/ にある FileSaver.js です。

于 2014-02-21T07:06:02.013 に答える