将HTML画布图像保存到本地文件夹

Question

使用引导程序，使用模态类在另一个窗口上显示单击图像。在此窗口上，我正在html画布上绘制图像，然后在图像上用圆圈标记。现在，当我单击上载按钮时，画布图像以及标记应保存到本地文件夹中。我尝试使用Canvas2Image.js，但未解决。

HTML代码：

<div class="col-md-3">
        <a href="#" data-toggle="modal" data-target="#myModal1">
        <img src="images/flower1.png" alt="..." class="img-thumbnail img-check">
        <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </a> 
    </div>


    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">Image</h4>
                </div>
                <div class="col-md-12" id="canvasimg">
                    <div class="content">
                        <img id="scream" width="220px" height="277px" src="images/flower1.png" style="display:none" alt="The Scream">
                        <canvas id="canvas" width="550px" height="400px"></canvas>
                    </div>
                </div>

                <div class="modal-footer" >
                    <div class="col-md-8 magnifid_pic" style="clear:both;">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Upload</button>
                    </div>
                 </div>
            </div>
        </div>
     </div>

Java脚本代码：

<script type="text/javascript">
        $(document).ready(function(){

        var imageDpi = 300;
        var posX;
        var posY;
        var can = document.getElementById('canvas');
        var ctx = can.getContext('2d');
        var startX, startY;
        var img = document.getElementById("scream");

            ctx.drawImage(img, 0, 0, can.width, can.height);

        $("canvas").mousedown(function(event){
            startX = event.pageX;
            startY= event.pageY;

            $(this).bind('mousemove', function(e){
                drawLine(startX, startY, e.pageX, e.pageY);
           posX = e.pageX -400 ;
           posY = e.pageY -75;
            });
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });

        function drawLine(x, y, stopX, stopY){
            var img = document.getElementById("scream");
            ctx.clearRect (0, 0, can.width, can.height);
            ctx.drawImage(img, 0, 0, can.width, can.height);
            ctx.beginPath();
            ctx.arc(posX, posY, 20, 0, 5 * Math.PI);
            ctx.closePath();
            ctx.stroke();

        }
    });



</script>