画像に文字入れしてシェアする機能を作る（Canvas / Web Share API）

Twitterなどで、画像に文字入れされているつぶやき（質問箱など）をよく見かけますよね。

自分のアプリでもそういうことできないかな～と思って調べてみたところ、HTML5 のCanvasとWeb Share APIなるものを使えば、利用環境は限定されるものの、かなり簡単に実装できそうだったので試してみました。

2020年7月28日時点では、画像付きでシェアが可能な Web Share API Level2はAndroid版Chromeのみの対応のようです。（文字だけのシェアであればMac,iOSのSafariも対応）

デモ：トイプードルのひとこと
ソース
参考サイト

デモ：トイプードルのひとこと

つぶやきたい文字を入力して、SHAREボタンを押してね！
（このデモはAndroidのChromeのみ対応しています）

ソース

Canvasで背景画像（我が家のかわいいトイプードル）を描画し、その上にテキストボックスの文字も描画します。

Shareボタン押下時は、toBlobでキャンバスをBlobに変換後、pngに変換して、Web Share APIでシェアする流れになっています。

HTML

<div>
    <input id="text-box" type="text" placeholder="画像に重ねる文字を入力...">
</div>
<div>
    <canvas id="cv" width="1200" height="675" style="width: 600px"></canvas>
</div>
<div>
    <span id="btn" onclick="share()">SHARE</span>
</div>

CSS

#text-box {
    width: 600px;
    padding: 10px 10px; 
    font-size: 16px;
    border-radius: 3px;
    box-sizing: border-box;
}

div {
    margin-bottom: 30px;
    text-align: center;
}

#btn {
    box-sizing: border-box;
    padding: 10px 20px;
    background: royalblue;
    color: white;
    cursor: pointer; 
    transition: 100ms
}

#btn:active {
    color: royalblue;
    background: white;
    border: solid 1px royalblue;
}

JavaScript

// テキストボックス
const textBox = document.getElementById("text-box")

// 背景画像
const bgImg = new Image()
bgImg.src = "bg-img.png"

// Canvas準備
const canvas = document.getElementById("cv")
const context = canvas.getContext("2d")

// 背景画像読込後にCanvasに描画
bgImg.onload = () => {
    context.drawImage(bgImg, 0, 0)
}

// 文字入力時に描画処理を呼び出す
textBox.addEventListener("input", () => {
    drawText(textBox.value)
})

// 描画処理
function drawText(text) {
    context.clearRect(0, 0, canvas.width, canvas.height)    // クリア
    context.drawImage(bgImg, 0, 0)                          // 背景画像描画
    context.fillStyle = 'black'                             // テキストカラーを指定
    context.font = "60px 'Kosugi Maru'"                     // フォントを指定
    context.textAlign = "center"                            // 左右中央
    context.textBaseline = "middle"                         // 上下中央
    context.fillText(text, 550, 250, 900);                  // テキスト描画
}

// シェアする処理
function share(){
    // Web Share APIの対応判定
    if (navigator.share !== undefined){
        // CanvasをBlobに変換→pngに変換
        canvas.toBlob( (blob) => {
            const shareImg = new File([blob], 'share.png', {type: 'image/png'})
            // シェア
            navigator.share({
                text: "トイプードルのひとこと",
                url: "https://web-breeze.net/add-text-to-image-and-share/",
                files: [shareImg]
            })
        })
    } else {
        alert("ご利用のブラウザがWeb Share APIに対応していません・・・")
    }
}