Web Share API で、canvasに描画した画像と、指定したハッシュタグをTwitterの投稿にコピーペーストする

使用想定シーン

画像合成して特定のハッシュタグでつぶやくキャンペーンの時に、サーバーや端末に合成画像を保存する事なく、コピーペースト操作でハッシュタグと画像をツイートしてもらう。
ユーザーに対して操作手順の説明は必要。

html

<div class="preview">
  <canvas id="js-previewCanvas" class="preview__canvas"></canvas>
  <img id="js-previewImage" class="preview__image" src="" />
  <p class="preview__clipboard">
    <button id="js-clipboardButton" class="preview__clipboardButton">クリップボードにコピー</button>
  </p>
</div>

script

const previewCanvas = document.getElementById('js-previewCanvas');
const previewImage = document.getElementById('js-previewImage');

const base64 = previewCanvas.toDataURL('image/jpeg', 1.0);
previewImage.src = base64;

const createJpegFile4Base64 = (base64, name) => {
  // base64のデコード
  const bin = atob(base64.replace(/^.*,/, ''));
  // バイナリデータ化
  const buffer = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i += 1) {
    buffer[i] = bin.charCodeAt(i);
  }
  // ファイルオブジェクト生成
  return new File([buffer.buffer], name, {type: 'image/jpeg'});
};

document.getElementById('js-clipboardButton').addEventListener('click', async () => {
  const file = await createJpegFile4Base64(previewImage.src, 'share-image.jpg');
  const shareData = {
    files: [file],
    title: 'share',
    text: '#ハッシュタグa #ハッシュタグb',
  }
  try {
    await window.navigator.share(shareData);
  } catch (err) {
    console.log(`Error: ${err}`);
  }
});

ユーザーの操作手順

• Canvasに合成画像を描画する。(この記事ではスキップ)
• クリップボードにコピー ボタンをクリック。
• ブラウザのダイアログから コピー をクリック。
• Twitterの投稿画面でペースト。 #ハッシュタグa #ハッシュタグb と、生成された画像をペーストできる