0

I have a web page where users can sign to accept a contract. I'm have a signature box that uses canvas to display. I would like to have the canvas save as a image, when I right click on the image it gives me a option to save it and works perfectly however I want to save it to my server to use for later

I have tried searching around a lot looking for code

<div>Signature: <i class="fa fa-pencil" aria-hidden="true" onclick="Signature('jm38s4i1');"></i></div>
                <button onclick="download()">Click me</button>
                <a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>
                <canvas id="Sig-jm38s4i1" class="dig-sig " sig-id-data="jm38s4i1" signed-data="false" width="400" height="100"></canvas>

function download(){
    document.getElementById("downloader").download = "image.png";
    document.getElementById("downloader").href = document.getElementById("Sig-jm38s4i1").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
}

When ever I click download it downloads a image to my computer however it cannot display it, I want to 1. be able to use it and 2. download server side

Edit: The PNG file contains the HTML of the page

ray
  • 26,557
  • 5
  • 28
  • 27
73areo
  • 25
  • 6

2 Answers2

2

Why don't you prevent the event, then change href, and fire click again?

function down(e){
    if(e.isTrusted){
        e.preventDefault()
    }
    document.getElementById("downloader").download = "image.png";
    document.getElementById("downloader").href = document.getElementById("Sig-jm38s4i1").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    e.target.click()
}

e.isTrusted tells you whether the user clicked or the script clicked, triggering e.preventDefault only when user clicks.

To get the event parameter, you have to write onclick as download(event).

YJM
  • 133
  • 1
  • 2
  • 11
  • Thank you for your answer however the file is still the same – 73areo Sep 29 '19 at 04:09
  • Can you change your function name 'download' to another? I've changed my function name to down and it works pretty well. – YJM Sep 29 '19 at 04:12
  • I just did that and I know longer have an error. However the image is just white and the file looks like this: https://pastebin.com/70XgadP5 – 73areo Sep 29 '19 at 04:26
  • Change attribute with attributes method : `a.attributes.href.value = canvas.toDataURL();` like this – YJM Sep 29 '19 at 05:16
  • Thank you, it appears to be working now. How can I make it so that it will download to a certain directory on my server instead of on the clients PC – 73areo Sep 29 '19 at 05:37
  • It can't be accomplished with javascript. You have to use PHP, or other Server-side languages to achieve your goal. Don't forget to mark this as answer if this helped you! – YJM Sep 29 '19 at 05:42
  • Just did so, how would I accomplish the same thing with PHP? – 73areo Sep 29 '19 at 05:44
  • You should pass the dataurl to php, using AJAX. Then you can follow this: https://stackoverflow.com/questions/6735414/php-data-uri-to-file – YJM Sep 29 '19 at 05:47
  • Sorry if this sounds stupid, I'm not experienced in JS... Ajax is apart of JS right? – 73areo Sep 29 '19 at 05:51
  • https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started // It is also part of Javascript, which is invented to communicate with server, or various sources from javascript. – YJM Sep 29 '19 at 05:52
0
<a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>

The initial href is set to the current page, and it has the download attribute. Seems likely that this would cause a click to download the current page.

Your onclick handler changes the href, but doesn't prevent the default behavior. So it wouldn't surprise me if, after it downloads the page, the href is set to the image. If you click it a second time does it work?

ray
  • 26,557
  • 5
  • 28
  • 27