保存带边框的画布

Question

我一直在写一个迷你图像编辑器。上传待编辑的图像后，我将其绘制到画布中。其中一个编辑工具是添加一个相框，该相框取自几个样本图像

这是我的HTML代码的相关部分

<div id="canvas-frame">
    <canvas id="edit-canvas" width="500"></canvas>
</div>
<div id="border-tool" class="tab-pane fade">
    <div class="border-selection active">
        <img src="img/hien/no-border.jpg" id="no-border">
    </div>
    <div class="border-selection">
        <img src="img/hien/border1.png">
    </div>
    <div class="border-selection">
        <img src="img/hien/border2.png">
    </div>
</div>

这是实现它的JavaScript代码

        $('#canvas-frame').width($('#edit-canvas').width());
        $('#canvas-frame').height($('#edit-canvas').height());

        function placeBorder(src){
            $('#canvas-frame').css('border-image','url('+src+') 30 round');
            $('#canvas-frame').css('border-width','20px');
        }

        $('#border-tool .border-selection img').click(function(){
            $('#border-tool .border-selection.active').removeClass('active');
            $(this).parent().addClass('active');
            if ($(this).attr('id')=='no-border'){
                $('#canvas-frame').css('border','none');
            } else{
                placeBorder(this.src);
            }
        });

正如您所看到的，我的想法是使用canvas-frame div来环绕画布，然后尝试更改它的css。但是现在我遇到了另一个问题，如何实现一个Save按钮来下载带有边框的画布。你能给我任何建议或教程吗？非常感谢