手書きで書いたものをダウンロードさせたい

全くの初心者です。

https://yamauuki.com/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E6%89%8B%E6%9B%B8%E3%81%8D%E3%82%B5%E3%82%A4%E3%83%B3%E3%81%8C%E5%8F%AF%E8%83%BD%E3%81%AAjquery%E3%83%97%E3%83%A9%E3%82%A4%E3%82%B0%E3%82%A4%E3%83%B3/#toc1

上記のサイトのように手書きでイラスト等を書いて、
その画像を下に表示させるのではなく、pngにてダウンロードさせたいです。

html
1<html>
2	<head>
3	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
4	<script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>
5	<script>
6		$(document).ready(function() {
7		    $("#canvas").jSignature();
8
9			$("#clear").click(function() {
10				$("#canvas").jSignature("reset");
11				$("img").remove();
12			});
13			
14			$("#download-image").click(function() {
15				var i = new Image();
16				i.src = $("#canvas").jSignature("getData");
17			$(i).appendTo($("#someelement"));
18			});
19			
20		});
21	</script>
22	</head>
23	<body>
24		<div id="canvas" style="background-color:#ffffee;"></div>
25		<button id="clear">クリア</button>
26		<button id="download-image">画像ダウンロード</button>
27		<div id="someelement"></div>
28	</body>
29</html>
30
31

Canvas データを PNG 画像として保存
https://javascript.keicode.com/newjs/download-files.php

こちらのサイトを参照しながらソースを書き換えたのですがうまくいかず、、

ご教授いただけますと幸いです。
どうぞよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>
3<script>
4$(function(){
5  $("#canvas").jSignature();
6  $("#clear").click(function() {
7    $("#canvas").jSignature("reset");
8    $("img").remove();
9  });
10  $("#download-image").click(function() {
11    var a=$('<a>');
12    a.attr({'href':$("#canvas").jSignature("getData"),download:"test.png"}).appendTo($('body')).end().get(0).click();
13    a.remove();
14  });
15});
16</script>
17<div id="canvas" style="background-color:#ffffee;"></div>
18<button id="clear">クリア</button>
19<button id="download-image">画像ダウンロード</button>
20<div id="someelement"></div>
21