我是编码新手,我想在单击保存按钮时将画布另存为 .png
<script>
function save(){
var canvas=$('#myCanvas');
var blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
if (canvas.toDataURL()!=blank.toDataURL()){
var dataURL=canvas.toDataURL('image/png');
document.form.dataURL.value=dataURL;
document.form.savei.href=dataURL;
}
</script>
表格
<form class="valign-middle" name="form" id="form">
<button class="btn" onclick="clear();return false;"></button>
<button class="btn" onclick="save();return false;"></button>
<i class="fa fa-paint-brush"></i> <input class="valign-middle" type="range" name="pw" min="1" max="10" value="2" onchange="$('#pb').css({width:this.value+'px',height:this.value+'px'});">
<span class="inline-block padding-s valign-middle border">
<div class="bg-black" id="pb" style="width:2px;height:2px;"></div>
</span>
<input class="valign-middle" type="color" name="pc" value="#000000">
<input class="width-max valign-middle" type="text" name="url">
<input name="order">
<input name="dataURL"><a name="savei" id="savei" href="" download="canvas.png">Save Canvas</a>
执行后,<input name="dataURL">
返回值data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRgAAAKZCAYAAADTU0fuAAAgAElEQVR4XuzdfbCsd0Ef8K837yQQEsAIakAQRCqUCtYWBjOpNTJUnZEi.........
,这么长,但是当我粘贴url时,效果很好
问题是 <a name="savei" id="savei" href="" download="canvas.png">Save Canvas</a>
return href http://localhost:8000/notes/edit?pw=2&pc=%23000000&url=http%3A%2F%2Flocalhost%3A8000%2Fnotes%2Fedit%3F&order=&dataURL=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAABRgAAAKZCAYAAADTU0fuAAAgAElEQVR4XuzdfbCsd0Ef8K837yQQEsAIakAQRCqUCtYWBjOpNTJUnZEiLx1KW61OUWJtUUBxpp2%2BYW2hiMYWUSuVqqW26B9aio4tIMgUi6i1OooUzDQNhAiBhLyHzq8%2Bpx4v9%2B7Z8%2Bw5e767%2Bzkzdy6Yffk%2Bn%2B8Tzjlfd%2Ff5jPgiQIAAAQIECBAgQIAAAQIECBAgQIDATIHPmHk%2FdyNAgAABAgQIECBAgAABAgQIECBAgEAMjE4CAgQIECBAgAABAgQIE...
并且此网址显示 Request-URI Too Long. The requested URL's length exceeds the capacity limit for this server.
我不知道为什么他们得到不同的结果,有什么帮助吗?