0

i am a newbie in coding, i want to save canvas as .png when click the save button

 <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

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

after execute, <input name="dataURL"> return value data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABRgAAAKZCAYAAADTU0fuAAAgAElEQVR4XuzdfbCsd0Ef8K837yQQEsAIakAQRCqUCtYWBjOpNTJUnZEi.........,it's so long, but when i paste in url, it works well

the problem is <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...

and this url shows Request-URI Too Long. The requested URL's length exceeds the capacity limit for this server. i don't know why they get different result, any help?

Lax
  • 1

0 Answers0