element-shot

HTML 要素をスクリーンショットとしてキャプチャする軽量なコンポーネントライブラリ。React と Vue.js をサポート。

English README is here

対象要素の右下にカメラボタンを表示し、

カメラボタンを押すと、その要素のスクリーンショットをクリップボードに保存したり、画像としてダウンロードできます。このとき指定したタイトルやキャプションも付加できます。

特徴

• 📸 任意の HTML 要素をスクリーンショットとして保存
• 🎯 シンプルで直感的な API
• 🚀 最小限の依存関係で軽量
• ⚛️ React コンポーネント対応
• 💚 Vue.js コンポーネント対応
• 🎨 UI と動作のカスタマイズ可能
• 📱 レスポンシブでモバイルフレンドリー
• 🔧 TypeScript 対応

インストール

npm install element-shot-components
# または
yarn add element-shot-components
# または
pnpm add element-shot-components

使い方

React

import { ElementShot } from "element-shot-components/react";

function App() {
  return (
    <ElementShot
      action="download"
      title="スクリーンショットのタイトル"
      caption="この説明もスクリーンショットに含まれます"
      align="center"
    >
      <div>
        <h1>キャプチャする内容</h1>
        <p>カメラボタンをクリックすると、この内容がキャプチャされます</p>
      </div>
    </ElementShot>
  );
}

Vue.js

<template>
  <ElementShot
    action="download"
    title="スクリーンショットのタイトル"
    caption="この説明もスクリーンショットに含まれます"
    align="center"
  >
    <div>
      <h1>キャプチャする内容</h1>
      <p>カメラボタンをクリックすると、この内容がキャプチャされます</p>
    </div>
  </ElementShot>
</template>

<script setup>
  import { ElementShot } from "element-shot-components/vue";
</script>

プロパティ

| プロパティ | 型 | デフォルト値 | 説明 | | ---------------- | -------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------ | | action | 'download' \| 'copy' \| 'share' \| 'preview' | 'download' | スクリーンショットのアクション | | target | string | - | プレビュー対象の CSS セレクター（'preview'アクションで必須） | | title | string | - | コンテンツ上部に表示されるタイトル（スクリーンショットに含まれる） | | caption | string | - | コンテンツ下部に表示される説明（スクリーンショットに含まれる） | | align | 'left' \| 'center' | 'left' | タイトルと説明の配置 | | basename | string | 'element-shot-components' | ダウンロードファイルのベース名 | | defaultStyle | boolean | true | タイトルと説明にデフォルトスタイルを適用 | | cameraPosition | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top-right' | カメラボタンの位置 | | cameraView | 'always' \| 'hover' \| 'none' | 'hover' | カメラボタンの表示タイミング | | scale | number | 1 | スクリーンショットの拡大率 | | className | string | - | コンテナに追加する CSS クラス | | style | object | - | コンテナに追加するインラインスタイル |

React 専用プロパティ

| プロパティ | 型 | 説明 | | ----------------- | ------------------------ | ------------------------------ | | onBeforeCapture | () => void | キャプチャ開始前のコールバック | | onAfterCapture | (blob: Blob) => void | キャプチャ完了後のコールバック | | onError | (error: Error) => void | エラー発生時のコールバック |

Vue.js 専用イベント

| イベント | ペイロード | 説明 | | --------------- | ---------- | ---------------------- | | beforeCapture | - | キャプチャ開始前に発火 | | afterCapture | Blob | キャプチャ完了後に発火 | | error | Error | エラー発生時に発火 |

アクション

• download: スクリーンショットを PNG ファイルとしてダウンロード
• copy: スクリーンショットをクリップボードにコピー（HTTPS 必須）
• share: ネイティブ共有ダイアログを開く（HTTPS とブラウザサポート必須）
• preview: 指定した<img>要素にスクリーンショットを表示

使用例

カスタムファイル名でダウンロード

<ElementShot action="download" basename="my-screenshot">
  <div>コンテンツ</div>
</ElementShot>

クリップボードにコピー

<ElementShot action="copy" cameraView="always">
  <div>コンテンツ</div>
</ElementShot>

画像要素でプレビュー

<>
  <ElementShot action="preview" target="#preview-image">
    <div>コンテンツ</div>
  </ElementShot>

  <img id="preview-image" alt="スクリーンショットプレビュー" />
</>

カスタムスタイル

<ElementShot
  className="my-custom-class"
  style={{ maxWidth: "600px" }}
  defaultStyle={false}
>
  <div>コンテンツ</div>
</ElementShot>

ブラウザサポート

• Chrome/Edge (最新版)
• Firefox (最新版)
• Safari (最新版)
• HTML5 Canvas をサポートするモバイルブラウザ

開発

# 依存関係のインストール
npm install

# 開発ビルドの実行
npm run dev

# テストの実行
npm test

# Reactサンプルの実行
npm run example:react

# Vueサンプルの実行
npm run example:vue

# ライブラリのビルド
npm run build

ライセンス

MIT License - 詳細はLICENSEファイルを参照してください

コントリビューション

コントリビューションを歓迎します！お気軽に Pull Request を送信してください。

1. リポジトリをフォーク
2. フィーチャーブランチを作成 (git checkout -b feature/amazing-feature)
3. 変更をコミット (git commit -m 'Add some amazing feature')
4. ブランチにプッシュ (git push origin feature/amazing-feature)
5. Pull Request を開く

謝辞

• html2canvasを使用して構築
• tsupでバンドル
• Vitestでテスト