1

I have a program to write text on an image and download it. I have written text on the image. Now i want to download it by click download button.

Point is: There is one draw button which will draw text on image. Instead of I need Download button which will combine draw text and download as png file. I am not used php. Its canvas only.

Here is the program link:

[http://codepen.io/vengreat/pen/dGvJyK][1]
fionaredmond
  • 639
  • 7
  • 15
Venkadesh S
  • 71
  • 1
  • 12
  • 2
    The problem is that you haven't written the text on the image, you've simply added text into your dom and placed it over your image. You should look up how to convert html to a `canvas` object then convert the `canvas` to an image and download it. This is a good js library for the first part https://html2canvas.hertzen.com/ – gaynorvader Jan 06 '16 at 11:32

1 Answers1

1

Try this function in this link sure it will work

function downloadCanvas(link, canvasId, filename) {
    link.href = document.getElementById(canvasId).toDataURL();
    link.download = filename;
}


document.getElementById('draw').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
}, false);

https://jsfiddle.net/hellosrini/dw9bmt0u/

Srinivasan Lakshmanan
  • 435
  • 4
  • 16