ForHosting KIT · 画像の編集・解析

画像モザイク計算

1920×1080の画像を16ピクセルのブロックで区切ると、120列×68行で合計8160ブロックになり、最後の行は高さ8ピクセルです。色を処理する前にモザイクの格子を決められます。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

計算例

入力した場合

幅: 1,920
高さ: 1,080
ブロックサイズ: 16

結果

列: 120
行: 68
ブロック総数: 8,160
右端の幅: 16

画像モザイク計算ツールは、画像の幅と高さ、正方形ブロックの大きさから、ピクセル化処理に必要な正確なグリッドを求めます。列数、行数、ブロック総数に加え、右端と下端にできる部分ブロックの寸法も表示します。フィルターの設計、モザイク生成、処理量の見積もり、デザインプレビューと実装の照合に役立ちます。画像そのものをアップロードしたりデコードしたりせず、同じ入力から常に同じ結果を計算します。

画像のピクセル寸法をブロックグリッドに変換します

ピクセル化処理では、隣接する元画像のピクセル群を一つの代表色に置き換えます。色を処理する前に、横方向と縦方向へ何個のグループを配置できるか把握する必要があります。画像の幅と高さをピクセル単位で入力し、正方形ブロックの一辺を指定してください。

本ツールは各寸法をブロックサイズで割り、結果を切り上げます。画像寸法が指定サイズの倍数になるとは限らないため、切り上げが重要です。右端にわずかな余りしかなくても専用の列が必要であり、切り捨てると未処理の帯が残ります。

ループの上限、Canvas の設計、処理量の見積もり、テストデータ、画面プレビューなどに利用できます。本ツールが扱うのは幾何情報だけです。画像データの読み取り、色の抽出、ファイルのリサイズ、加工画像の生成は行いません。

そのため画像形式に左右されず、同じ数値から同じ結果を返します。

画像端にできる部分ブロックを確認します

幅と高さがブロックサイズで割り切れる場合、すべてのセルは同じ寸法になります。しかし実際の画像では余りが生じることが多く、最後の列が細くなったり、最後の行が低くなったりします。余りがない場合は、最後のブロックが通常の完全なブロックであるため、ゼロではなくブロックサイズそのものを返します。

余りがある場合は、残った元画像のピクセル数を正確に示します。この規則により、描画コードを簡潔にできます。グリッドは切り上げ除算で作られるため、すべての元ピクセルが必ず一つのセルに属します。

サンプリング範囲の切り抜き、タイル用バッファーの確保、計算領域が元画像の境界を超えないことの検証に特に有効です。

有効で目的に合うブロックサイズを選びます

本ツールは離散的な画像ピクセルを扱うため、幅、高さ、ブロックサイズには正の整数を指定してください。また、正方形ブロックは画像の幅と高さの両方に収まる必要があります。有効範囲では、小さいブロックほど認識可能な細部を多く残し、セル数が増えます。

大きいブロックほど粗い抽象表現になり、セル数は減ります。実際の画像フィルターを動かす前に複数の候補を比較すれば、見た目と処理量のバランスを調整できます。レスポンシブなプレビューでは、以前の個数を拡大縮小せず、画像寸法またはブロックサイズが変わるたびに再計算してください。

端の切り上げによって行数や列数が変わる場合があるためです。必要なのは数値寸法だけで、画像ピクセルは送信されません。

活用例

Canvas のピクセル化ループを設計

正方形の色領域をサンプリングして描画する前に、行と列の正確な上限を取得できます。

モザイク処理量を見積もる

ブロック総数を使い、複数の候補サイズが生む処理量を比較できます。

不均一な画像端を処理

右端と下端の寸法を使い、ピクセルの欠落や画像境界外の読み取りを防げます。

よくある質問

1920×1080の画像を16ピクセルのブロックにすると何個になりますか？

120列×68行で、8160ブロックになります。幅はちょうど割り切れますが、1080は16の倍数ではないため、いちばん下の行は高さ8ピクセルになります。

切り捨てではなく切り上げで計算するのはなぜですか？

右端や下端に残る細い帯にも、それぞれのブロックが必要だからです。切り捨てるとその帯が処理されずに残りますが、切り上げればどのピクセルも必ず1つのブロックに入ります。

ブロックの大きさはどう選べばよいですか？

小さいブロックほど元の細部が分かりやすく残り、ブロック数も増えます。大きいブロックは粗く抽象的な見た目になり、数は減ります。いくつかの大きさで数を比べてから実際の処理を行ってください。

このツールで写真そのものにモザイクがかかりますか？

いいえ。幅、高さ、ブロックの大きさから格子の寸法を計算するだけです。画像を開いたり色を読み取ったり、新しいファイルを作ったりはしないため、同じ数値なら常に同じ結果になります。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/image/pixelate

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/image/pixelate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"width":1920,"height":1080,"block_size":16}'

const res = await fetch("https://api.kit.forhosting.com/image/pixelate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "width": 1920,
    "height": 1080,
    "block_size": 16
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/pixelate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "width": 1920,
    "height": 1080,
    "block_size": 16
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/pixelate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"width":1920,"height":1080,"block_size":16}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"width":1920,"height":1080,"block_size":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/pixelate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "width": 1920,
  "height": 1080,
  "block_size": 16
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.pixelate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`max_mb`	15
`max_megapixels`	12

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

画像のピクセル寸法をブロックグリッドに変換します

columns と rows はグリッド全体を示し、total_blocks は両者の積です。

画像端にできる部分ブロックを確認します

right_edge_width と bottom_edge_height は、この境界条件を明示する値です。通常セルには block_size を使用し、最後の列と行だけに表示された端の寸法を適用できます。

有効で目的に合うブロックサイズを選びます

どちらかの辺より大きい正方形では要求されたグリッドを作れないため、曖昧な結果ではなく invalid_input を返します。ブラウザー版はローカルで計算し、自動化された API リクエストは 1 回 $0.002 です。

技術的な質問

グリッドの列数と行数はどのように計算しますか？

各画像寸法を block_size で割って切り上げ、右端と下端の部分ブロックも含めます。

画像寸法が割り切れる場合はどうなりますか？

最後の列と行が完全なブロックになるため、端の寸法は block_size と同じ値です。

画像より大きいブロックが拒否されるのはなぜですか？

正方形ブロックは幅と高さの両方に収まる必要があります。大きすぎる値はグリッドを定義できず、invalid_input を返します。

画像を変更したりアップロードしたりしますか？

いいえ。width、height、block_size だけを受け取り、画像ファイルを読み込まずに幾何情報を計算します。

API リクエストの料金はいくらですか？

API リクエストは 1 回 $0.002 です。同じ決定的な計算をブラウザーでは無料で利用できます。

KITの完全なドキュメントを見る →

画像モザイク計算

無料で実行

計算例

画像のピクセル寸法をブロックグリッドに変換します

画像端にできる部分ブロックを確認します

有効で目的に合うブロックサイズを選びます

活用例

Canvas のピクセル化ループを設計

モザイク処理量を見積もる

不均一な画像端を処理

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

制限

エラー

技術的な注記

画像のピクセル寸法をブロックグリッドに変換します

画像端にできる部分ブロックを確認します

有効で目的に合うブロックサイズを選びます

技術的な質問

ありがとう