èªã¿è¾¼ã¿ä¸...
èªã¿è¾¼ã¿ä¸...
リアルレイヤーを持つブラウザ内の無料ミーム＆コラージュメーカー。クリップボードから直接スクリーンショットを貼り付け、各スクリーンショットをドラッグ＆リサイズし、必要な部分をトリミングし、クラシックなミームキャプションを重ねます。PNG、JPEG、またはWebPにエクスポート — 何もデバイスから出ません。
これは、実際のレイヤーを持つ集中型のブラウザ専用ミームメーカーで、単一画像エディタと完全なデザインツールの間の欠けていた部分です。任意の数の画像をドラッグインまたは貼り付け（スクリーンショットにはCtrl+Vが機能します）すると、それぞれが移動、サイズ変更、切り抜き、順序変更、非表示、または削除できる独自のレイヤーになります。調整可能なフォント、サイズ、塗りつぶし、ストローク、および整列を持つテキストレイヤーを必要なだけ重ねることができます — デフォルトは、クラシックなインパクトスタイルのミームキャプションに合わせられています。全体のキャンバスは、PNG（オプションの透明性付き）、JPEG、またはWebPとしてエクスポートできる単一の合成画像にレンダリングされます。すべてはブラウザ内のCanvas APIで行われるため、何も — スクリーンショットも、ドラフトも、最終画像も — サーバーにアップロードされることはありません。
プリセット（正方形、ポートレート、ストーリー、またはワイド）を選択するか、カスタムの幅と高さを入力します。正方形1080は投稿の安全なデフォルトです; ストーリーは縦型リールやストーリーに適しています。
画像を追加をクリックしてアップロードするか、ファイルをページにドラッグするか、Ctrl+V（MacではCmd+V）でクリップボードからスクリーンショットを直接貼り付けます。それぞれの画像が独自のレイヤーになります。
レイヤーをクリックして選択し、ドラッグして移動します。コーナーハンドルを使用してサイズを変更します — 画像レイヤーはアスペクト比を保持するため、潰れることはありません。
画像レイヤーを選択した状態で、レイヤーを切り抜くをクリックし、レイヤー内に長方形をドラッグして適用します。切り抜きは破壊的ですが、すべてクリアを選択してやり直すことができます。
テキストを追加をクリックします — デフォルトは、黒いストロークの白い太字大文字インパクトで、クラシックなミームの外観です。テキストを編集し、配置し、プロパティパネルでフォント、サイズ、色を調整します。
前面と背面を使用して、どのレイヤーが上にあるかを制御します。目のアイコンを切り替えて、レイヤーを削除せずに非表示にします。
PNG（透明性やシャープなテキストに最適）、JPEG（写真が多いミームに最小）、またはWebPを選択します。合成をダウンロードをクリックします — フル解像度の結果がローカルに生成され、デバイスに保存されます。
1. 各レイヤーは位置（x, y）、サイズ（幅、高さ）、z順序、および可視性を持ちます。 2. 画像レイヤーはcreateImageBitmap(file)からのImageBitmapを保持します。 3. テキストレイヤーはテキストとフォント、サイズ、塗りつぶし、ストローク、および整列を保持します。 4. 各レンダリング時に、作成者はレイヤーを下から上へと歩き、2Dキャンバスに描画します。 5. 画像レイヤーはctx.drawImage(bitmap, x, y, w, h)を使用します。 6. テキストレイヤーは、レイヤーの幅で単語を折り返しながら ctx.fillText / ctx.strokeText を使用します。 7. クロップはソースのサブリージョンから新しい ImageBitmap を生成し、レイヤーの表示サイズはそれに合わせて縮小します。 8. エクスポートは、ユーザーが編集している同じキャンバスで canvas.toBlob(format, quality) を呼び出します。
レイヤーコンポーザーは、各レンダリングで再生される描画操作のリストです。ソースビットマップとテキスト設定が保持されるため、キャンバスは状態の純粋な投影です — ユーザーが明示的にクロップを適用したりレイヤーを複製したりするまで、破壊的な編集はありません。PNGエクスポートは透明性と鮮明なテキストエッジを保持します; JPEG と WebP は品質ノブを持ち、圧縮アーティファクトのコストで小さなファイルを生成します。これにはサーバーは必要ありません: エディタービューをレンダリングするのと同じ Canvas API が最終的なエクスポートファイルも生成します。
| 目標 | やり方 |
|---|---|
クラシックインパクトスタイルのミームを1つの画像で | 画像を追加し、キャンバスを埋めるようにスケールします。テキストを追加 — デフォルトは大文字のインパクト、白の塗り、黒のストロークです。テキストを上にドラッグし、下のキャプション用に複製します。 デフォルトのテキストスタイルはクラシックな外観に一致します。 |
並べて比較したスクリーンショット | キャンバスをワイド1200×630に設定します。Ctrl+Vで2つのスクリーンショットを貼り付けます — それらは別々のレイヤーとしてスタックされます。各レイヤーをドラッグしてサイズを変更し、キャンバスの半分を埋めます。 ビフォー/アフターの投稿やバグレポートに最適です。 |
キャプション付きの3つのスクリーンショットコラージュ | ポートレートを選択します。3つのスクリーンショットを貼り付け、各スクリーンショットのサイズをキャンバスの高さの3分の1に変更し、各間にキャプションとして小さなテキストレイヤーを追加します。 キャプションが隠れた場合は、前方/後方を使用してください。 |
スクリーンショットからナビゲーションバーをトリミング | スクリーンショットをレイヤーとして追加します。レイヤーをクロップし、必要なコンテンツの周りに矩形をドラッグします。適用 — レイヤーはトリミングされた領域になります。 クロップは破壊的です — すべてクリアはキャンバスをリセットします。 |
透明な背景のストーリーフォーマットミーム | ストーリープリセットを選択し、背景に透明をチェックし、キャラクターの切り抜きを追加します（最初に背景除去ツールを通してください）、その後キャプションテキストを追加します。 透明性を保持するためにPNGとしてエクスポートします。 |
最終更新日