Q&A
全くの初心者です。
上記のサイトのように手書きでイラスト等を書いて、
その画像を下に表示させるのではなく、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件
0
ベストアンサー
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
投稿2021/11/22 06:24
編集2021/11/22 07:46
総合スコア115012
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/22 08:41