思いっきり他サイトからのパクリですが、自分でもこんな表彰状作成サイトを作ってみました。
誰でも表彰表彰する人の指名、メッセージ、自分の名前、日付を入力する欄があります。
背景は英文の認定証と日文の感謝状の2種類。
感謝状背景はちょっとしょぼかったですね。。。
作成した表彰状は、png形式でダウンロードすることも可能です。
驚いたのはcanvasの機能の豊富さ。
名前の通り真っ白なキャンバスとして、画像を載せるも良し、文字を載せるも良し。
pngとして保存することもできちゃいます。
HTML, Javascript, cssしか使っていないので、コードはサイトから見られるかと思います。（https://triplearner.com/hyoushou/index.html）
HTMLのcanvas部分はこれだけ
|
1 |
<canvas id="cert" width="1233" height="872"></canvas> |
canvasのサイズを設定しています。
サイズは背景画像と同じサイズを指定しました。
これで真っ白な枠が完成したので、あとはJavaScript側でこの枠を認識して、文字や画像を入れていくだけです。
枠の認識
|
1 2 |
var canvas = $('#cert')[0]; var ctx = canvas.getContext('2d'); |
どちらの背景画像が選択されているかを確認。
選択が変更される度に再確認しています。
|
1 2 3 4 5 6 7 8 9 |
var img = new Image(); $("input[name='back']").change(function(){ var back = $("input[name='back']:checked").val(); if(back=="certificate"){ img.src = 'certificate.png'; }else{ img.src = 'thanks.png'; } }).trigger('change'); |
選択されている方の背景画像を描画
3行目のdrawImageでimgをcanvas内の左から0、上から0の一から描画することを支持しています。
resetCanvas()は文字を入力するための関数です。背景が切り替わった後も再度現在入力されている文字を読み直しています。
|
1 2 3 4 5 6 7 8 9 10 |
$(img).on('load',function(e){ ctx.drawImage(img, 0, 0); document.fonts.load('bold 28px "Sawarabi Mincho"'); document.fonts.ready.then(function(fontFaceSet) { if (fontFaceSet.check('bold 28px "Sawarabi Mincho"')) { isSawarabiLoaded = true; resetCanvas(); } }); }); |
一部ですがresetCanvasの中身。
#receiverは「to whom?」の枠の名前です。この内容が書き換えられるたびにresetCanvas()が走るようになっています。
「ctx.fillText(chars[0] , 600, 400);」で文字入力です。
|
1 2 3 4 5 6 7 8 9 10 11 |
var $receiver = $('#receiver'); $receiver.on('keyup keypress blur change paste',resetCanvas); function resetCanvas() { ctx.fillStyle = '#111010'; if ($receiver.val().length > 0) { ctx.textAlign = 'center'; ctx.font = isSawarabiLoaded ? 'bold 48px "Sawarabi Mincho"' : 'bold 48px serif'; var chars = splitByLength($receiver.val(),9); ctx.fillText(chars[0] , 600, 400); } |
最後にダウンロード。その時のcanvasの内容をそのままpng化します。
|
1 2 3 4 5 |
$("#download").on('click', function () { var imgageData = canvas.toDataURL("image/png"); var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#download").attr("download","certification.png").attr("href", newData); }); |
ちなみに、HTMLでコメントアウトしてあるファイルアップロード機能を復活させると、推薦状に画像を1枚添付できます。
背景画像的に画像を追加する場所がなかったのでやめました。
JavaScriptだけで、ファイルをアップロードしなくてもプレビューさせたり、canvasに描画してダウンロードさせたりできるのは発見。
完成したサイトがこちら