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

以前、「手書きで書いたものをpngでダウンロードさせたい」と質問させていただきましたが、
https://teratail.com/questions/370464
それをjpgでダウンロードさせたいです。

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				width:380,
7				height:260,
8				color:"#000",
9				"background-color":"#fff",
10				lineWidth: 2,
11				cssclass:"demo-class",
12			});
13
14  $("#clear").click(function() {
15    $("#canvas").jSignature("reset");
16    $("img").remove();
17  });
18
19
20  $("#download-image").click(function() {
21    var a=$('<a>');
22    a.attr({'href':$("#canvas").jSignature("getData"),download:"image.png"}).appendTo($('body')).end().get(0).click();
23    a.remove();
24  });
25});
26
27</script>

jpeg形式としてBase64化するというところまではなんとなくわかったのですが、
それを実装できず、、ご教授いただけますと幸いです。

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

回答1件

ベストアンサー

背景色さえ設定すればあとはcanvasのtoDataURLで行けそうですね

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  var canvas = $("#canvas canvas").get(0);
7  var ctx = canvas.getContext('2d');
8  ctx.fillStyle = 'white';
9  ctx.fillRect(0,0, canvas.width,canvas.height); 
10  $("#clear").click(function() {
11    $("#canvas").jSignature("reset");
12    $("img").remove();
13  });
14  $("#download-image").click(function() {
15    var a=$('<a>');
16    a.attr({'href':canvas.toDataURL("image/jpeg"),download:"test.jpg"}).appendTo($('body')).end().get(0).click();
17    a.remove();
18  });
19});
20</script>
21<div id="canvas" style="background-color:#ffffee;"></div>
22<button id="clear">クリア</button>
23<button id="download-image">画像ダウンロード</button>