iOS Safari で canvas の画像を保存させる(download 属性 / Web Share / 長押し)

<a download> の信頼性#

• Safari のブラウザタブ: Blob URL のダウンロード不具合が Safari 12 時代から報告され続けている(WebKit Bug #190351)。2018 年に一度 FIXED になったが Safari 14 でも再現報告があり、iOS 17.4.1 で Blob URL が一時的に動かなくなり 17.5 beta で直った例もある
• ホーム画面追加の standalone モード: WebKit Bug #236943 “File download link traps user in PWA” が記録されている。ダウンロードリンクをタップすると PWA 内に閉じ込められ、戻れない
• File System Access API は iOS Safari 未対応

standalone PWA では <a download> を主な手段にしない。

Web Share API Level 2(navigator.share({ files }))#

iOS 15 以降の Safari でファイル共有に対応し、standalone モードでも使える。canvas から得た Blob を File に包んで渡すと、iOS の共有シートから「画像を保存」が選べる。

1
async function saveCanvas(canvas: HTMLCanvasElement): Promise<void> {
2
  const blob = await new Promise<Blob | null>((r) => canvas.toBlob(r, "image/png"));
3
  if (!blob) throw new Error("toBlob failed");
4
  const file = new File([blob], "image.png", { type: "image/png" });
5

6
  if (navigator.canShare?.({ files: [file] })) {
7
    // iOS Safari では title を付けると画像ではなくテキストとして共有される報告があるため省く
8
    await navigator.share({ files: [file] });
9
    return;
10
  }
11
  // フォールバックへ
12
}

条件は 3 つ。HTTPS 上であること、navigator.canShare({ files }) で事前確認すること、click などのユーザー操作(transient activation)から呼ぶこと。

長押し保存のフォールバック#

window.open() で canvas を data URL として新規タブに開き、「画像を長押しして保存」と手順を文字で案内する。Web Share が使えない古い iOS や、共有シートを閉じてしまった場合の受け皿になる。

フォールバック順#

1. navigator.canShare({ files }) が true → Web Share API Level 2 で共有シートへ
2. 新規タブで開いて長押し保存を案内
3. <a download>(Android / デスクトップ向けの主な手段、iOS では補助)

iOS 以外では 3 を先に試してよい。分岐は UA 判定ではなく canShare の結果で行う。

canvas 再エンコードで EXIF / GPS が落ちる#

Canvas API はピクセルデータだけを扱うため、drawImage() で描いた時点で EXIF・IPTC・XMP・GPS などのメタデータは捨てられる。canvas.toBlob("image/png") の出力には元画像のメタデータが含まれない。多くのオンライン EXIF 除去ツールがこの挙動を意図的に使っており、「保存時に位置情報が落ちる」というプライバシー説明の根拠になる。

対応状況の確認(2026-06)#

• canvas.toBlob(): Baseline Widely Available。iOS Safari でも動く
• imageSmoothingEnabled: Baseline Widely Available(2017 年以降)。-webkit- などのベンダープレフィックスは不要。古い記事のコードを写すと冗長なプレフィックスが残る
• モザイク(ピクセル化)は「縮小 → imageSmoothingEnabled = false → 拡大」で実装できる。ブロックサイズはプレビューで調整できるようにする

未確認事項#

• Safari 18 / iOS 18 で download 属性が standalone PWA で正式対応したかの一次確認
• touchmove のスロットリングや passive: false の要否など、iOS Safari でのフリーハンド描画パスの精度に関する既知問題

関連#

• iOS の PWA 制限

• PWA の Web Share Target(Android)の実測と落とし穴

• 単一画面の Canvas ツールのスタック選定

更新履歴#

• 2026-06-15: 初版(ローカル調査ノート)
• 2026-10-17: Wiki へ移植、概念ページとして再構成