サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
Webで
遊ぼ!
OPEN

ホーム

 > 

サンプルコード集

 > 

入力した文字が画像化→ダウンロードできる機能

入力した文字が画像化→ダウンロードできる機能

2021・06・03

*入力した文字が画像になり、ダウンロードできます!*

文字色とふちどりの色を選択し、文字を入力して「画像化する」ボタンを押すと、入力した文字が画像かされます。
さらに、その後「画像をダウンロード」をクリックすることで、画像を保存できます。
保存した画像は、LINEなどでちょっとしたスタンプ代わりにも使えますよ☆

主な使用機能:HTML(canvas)・JavaScript

文字色を選択

ふちどりの色を選択

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
      .sampletextareabox {
        font-family: "游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
        width: 90%;
        margin: 2rem auto;
        text-align: center;
      }
      .samplecolorbox {
        font-size: .8rem;
        text-align: left;
        display: grid;
        grid-template-columns: repeat(4,max-content);
        gap: 10px;
        justify-content: center;
        align-items: center;
      }
      .samplecolorbox input {
        justify-self:end;
      }
      .sampletextareabox textarea {
        display: block;
        padding: 30px;
        margin: 2rem auto;
        border-radius: 10px;
        box-shadow: 2px 2px 2px grey;
        background-image: linear-gradient(rgba(166, 201, 238, 0.52),white 30%,white 70%,rgba(166, 201, 238, 0.52));
      }
      .mojiimgbox {
        display: flex;
        flex-direction: column;
        width: fit-content;
        margin: 0 auto;
      }
      #samplecanvas {
        background-color: rgba(230, 242, 255, 0.52);
        margin-bottom: 10px;
        box-shadow: 0px 0px 2px;
      }
     @media screen and (max-width:400px){
      .samplecolorbox {
        transform-origin: bottom;
        transform: scale(.78);
       }
     }
    </style>
  </head>
  <body>
    <div class="" style="height:60px;">

    </div>
    <div class="sampletextareabox">
      <div class="samplecolorbox">
        <input id="samplecolor1" type="color" name="" value="#fa8282"><p>文字色を選択</p>
        <input id="samplecolor2" type="color" name="" value="#12503e"><p>ふちどりの色を選択</p>
      </div>

      <textarea id="sampletextbox" name="name" rows="1" cols="15"></textarea>
      <button class="samplemojicheck" type="button" name="button">文字を画像化する</button>
      <button class="samplemojierase" type="button" name="button">画像を消去する</button>
    </div>
    <div class="mojiimgbox">
      <canvas id="samplecanvas" width="290" height="60"></canvas>
      <button id="btnDownload" type="button" name="button">画像をダウンロード</button>
    </div>
    <script defer>
       {
        const textarea = document.getElementById('sampletextbox');
        const mojicheckEmp = document.querySelector('.samplemojicheck');
        const mojicheckErase = document.querySelector('.samplemojierase');
        const mojicolor1 = document.getElementById('samplecolor1');
        const mojicolor2 = document.getElementById('samplecolor2');
        const btnDownload = document.getElementById('btnDownload');

        //カラーの選択がない場合のアラート
        mojicheckEmp.addEventListener('click', colorAlert);
        function colorAlert() {
          alert('文字色とふちどりの色を選択して下さい。');
        }
        //画像がセットされていない場合のアラート
         btnDownload.addEventListener('click', gazouAlert);
           function gazouAlert() {
             btnDownload.removeEventListener('click',gazouDownload);
             alert('画像がありません');
           }

        mojicolor1.addEventListener('change',() => {
          let mojiColor = event.target.value;

        mojicolor2.addEventListener('change',() => {
          let mojifuchiColor = event.target.value;
          mojicheckEmp.removeEventListener('click', colorAlert);
          mojicheckEmp.id = 'samplemojicheck';

          const mojicheck = document.getElementById('samplemojicheck');

        mojicheck.addEventListener('click',function () {
          if (textarea.value == 0) {
            alert('文字を入力して下さい');
          }
          else {
            //画像アラートを解除
            btnDownload.removeEventListener('click', gazouAlert);
            btnDownload.addEventListener('click', gazouDownload);

            const textcounter = textarea.value;

            const samplecanvas = document.getElementById('samplecanvas');
            const context = samplecanvas.getContext('2d');
            context.fillStyle = mojiColor;
            context.lineWidth = 5;
            context.strokeStyle = mojifuchiColor;
            context.font = 'bold 38px sans-serif';
            context.textBaseline = 'top';
            let mojiNum = textcounter;

            context.beginPath();

            context.strokeText(mojiNum,10,10);
            context.fillText(mojiNum,10,10);
            }
          });
        });
        });

          mojicheckErase.addEventListener('click', () =>{
            const contextErase = samplecanvas.getContext('2d');
            contextErase.clearRect(0,0,290,60);
          });

          //ダウンロード処理
        btnDownload.addEventListener('click', gazouDownload);
        function gazouDownload() {
          const canvas2 = document.getElementById('samplecanvas');

          const mimeType = 'image/png';
          const fileName = 'download.png';

          const base64 = canvas2.toDataURL(mimeType);

          const bin = atob(base64.replace(/^.*,/, ''));
          const buffer = new Uint8Array(bin.length);
          for (let i = 0; i < bin.length; i++) {
            buffer[i] = bin.charCodeAt(i);
          }

          const blob = new Blob([buffer.buffer], {
            type: mimeType
          });

          if (window.navigator.msSaveBlob) {
            // for IE
            window.navigator.msSaveBlob(blob, fileName);
          } else if (window.URL && window.URL.createObjectURL) {
            // for Firefox, Chrome, Safari
            const a = document.createElement('a');
            a.download = fileName;
            a.href = window.URL.createObjectURL(blob);
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          } else {
            // for Other
            window.open(base64, '_blank');
          }
        }

        }
    </script>
  </body>
</html>

« »