我一直在写一个迷你图像编辑器。上传待编辑的图像后,我将其绘制到画布中。其中一个编辑工具是添加一个相框,该相框取自几个样本图像
这是我的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按钮来下载带有边框的画布。你能给我任何建议或教程吗?非常感谢