0

there is an image on my webpage, i have given user option to edit the content on the image and download the image using javascript in codeigniter. the following is the download button code:

<div id="chumma" class="col-md-12">

 <button id="download" type="submit" onclick="download_image()"  name="button" value="Download" class="btn btn-primary" >Download</button>


</div>


function download_image(){
  var canvas = document.getElementById("imageCanvas");
  image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  var link = document.createElement('a');
  link.download = "<?php echo $val['title']; ?>.png";
  link.href = image;
    link.click();
}

but this is not downloading the image, instead its just reloading the page, can anyone please tell me what is wrong here, thanks in advance

  • Is this your exact code, because there are no ` – jcubic May 17 '20 at 16:19
  • @jcubic script tag is there, i just posted the download button code from my whole code –  May 17 '20 at 16:28
  • @jcubic i just want to download the image on the left side of this button using this script, –  May 17 '20 at 16:31
  • I think the issue is that you need to insert the a tag into the body before the click otherwise it will not trigger native download. – jcubic May 17 '20 at 19:03
  • @jcubic where excactly, cn you please tell? –  May 17 '20 at 20:36

1 Answers1

0

Try to insert the link into DOM, before clicking, it may be required to trigger native download.

function download_image(){
  var canvas = document.getElementById("imageCanvas");
  image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  var link = document.createElement('a');
  link.download = "<?php echo $val['title']; ?>.png";
  link.href = image;
  document.body.appendChild(link);
  link.click();
  setTimeout(() => link.remove(), 0); // setTimeout just in case
}

if there is a problem that link is visible for a split of second you can hide the link with CSS.

EDIT: didn't notice the submit button, if you want to do action in JavaScript don't use submit button because that will send http request to the server (submit the form). If you want to do action in JavaScript use <button type="button"> that will also work when inside the form (it will not submit).

jcubic
  • 61,973
  • 54
  • 229
  • 402
  • bro i tried this, again its simply reloading the page –  May 18 '20 at 10:15
  • should i add a tag near this button, –  May 18 '20 at 10:25
  • @zubairnazer sorry I didn't notice the submit button, don't use submit button if you want to do action in JavaScript because you will need to prevent default action which is sending the form (http request that look like page refresh). Use normal button and don't use `
    ` tag, if you need form tag use `
     – jcubic May 18 '20 at 11:09
  • bro, am getting the error "uncaught dom excption: failed to execute todataurl on htmlcanvas element, tainted canvas may not be exported –  May 18 '20 at 12:45
  • @zubairnazer then you have another not related error, you should look it up if you don't find information about in Google or on StackOverflow, please ask question about this error. – jcubic May 18 '20 at 16:51
  • @zubairnazer and just so you don't need to search the error, which you should always before asking the question, here is first entry in SO and Google [Tainted canvases may not be exported](https://stackoverflow.com/q/22710627/387194) – jcubic May 18 '20 at 16:51