圖像與多媒體

純前端 Canvas/Wasm 圖片轉檔、HEIC轉JPG、顏色轉換與QR碼工具。

已上線可用工具 (55)

← 返回全部工具

格式轉換與體積壓縮

色彩體系與設計輔助

HEX 轉 RGB 與 HSL 色彩轉換器

轉換 HEX、RGB 與 HSL,調整 Alpha、複製 CSS 色碼,檢查白色與黑色背景的 WCAG 文字對比度。

圖片 RGB 抽樣色板

取樣圖片像素並歸入粗略 RGB 色彩桶,回傳最多八個常見色桶;不使用 median-cut 或感知排序。

雙色對比率計算器

輸入前景與背景 HEX 色。 計算 sRGB 相對亮度和對比度。 回傳比值及 AA/AAA 門檻布林值。

HEX 色覺近似換算器

對單一 HEX 色套用固定近似 RGB 轉換,回傳三種 HEX;不讀取圖片,也非臨床模擬。

RGB 轉公式 CMYK

將輸入 RGB 數值換算為簡化 CMYK 百分比;不使用 ICC 印表機描述檔或印刷打樣。

HEX 與 5 色範例色票比對

在五個內建 Pantone 名稱樣本中找平方 RGB 距離最近者;不是完整色庫或印刷打樣。

四角 CSS 圓角生成器

調整八個獨立百分比半徑,即時預覽有機形狀並生成水平與垂直軸分開的 border-radius CSS。可選水滴、鵝卵石、氣泡預設與變形動畫。選用的 JSON 工作區仍輸出四角像素半徑。

PX 與 REM 換算器

以自訂根字級與 0–8 位小數,批次雙向轉換 CSS 的 px 與 rem 尺寸。保留字串、註解與 URL。另有獨立 JSON 計算器轉換單一數值。

圖片 srcset 文字生成器

使用既有圖片 URL 與寬度、sizes 屬性、原始尺寸及替代文字,產生完整的響應式 img 元素。可選延遲載入或高優先級即時載入;decoding 為 async。

五色 HSL 調色盤

以類似色、互補色、分裂互補色或三等分模式產生五色 HSL 調色盤。預覽按鈕和背景搭配,再下載 CSS 變數。

HEX 色碼附加 Alpha 位元組

輸入三位或六位 HEX 色碼,使用滑桿調整 0% 到 100% 不透明度。查看 #RRGGBBAA、CSS rgba() 與完整 101 列 Alpha 位元組對照表。選用的 JSON 工作區保留數值 alpha 換算。

網格漸層:4–6 個彩色光斑

以拖曳、鍵盤或數值控制4–6個放射光斑,調整顏色、位置、半徑與背景模糊,即時預覽自適應背景並複製CSS。

螢幕截圖 PNG 樣機

上傳截圖,加上深淺視窗或簡易手機外框,調整邊距、圓角、陰影與背景,再以1倍或2倍儲存PNG。

圖片像素取色器

選取本機圖片任意像素,以最高20倍的11×11格線檢視並複製HEX、RGB或HSL;支援環境可使用原生螢幕取色。

四種背景透明度比較

以黑、白、棋盤格與粉紅背景比較PNG、WebP、SVG透明度,放大檢查半透明邊緣。

濾鏡特效與像素隱私

QR Code 產生器

由文字或 URL、WiFi 設定、vCard 聯絡人產生 QR Code,可選 L/M/Q/H 並下載 PNG 或 SVG。

JPEG 重編碼元資料清理器

JPEG 重編碼元資料清理器:將可見畫素重新編碼為 JPEG,使常規源後設資料不被複制到輸出;敏感用途仍應獨立驗證。

右下角文字水印工具

在圖片右下附近加入固定半透明白字並匯出合成 PNG;沒有陰影或可移動圖層。

圖片灰階濾鏡

選取瀏覽器可解碼的圖片。 以 Canvas grayscale(1) 濾鏡繪製。 匯出 PNG。

二維碼圖片識別器

以 jsQR 讀取選取圖片中的 QR Code 並回傳文字;沒有相機或一維條碼掃描。

Code 128 條碼生成器

用 bwip-js 將可列印文字產生 Code 128 PNG 條碼;不是 QR Code。

圖片抖色

使用Floyd–Steinberg、Atkinson或Bayer 4×4抖色將圖片轉為黑白PNG。

圖片區域隱私編輯

拉框或筆刷選取圖片區域,套用實色覆蓋、馬賽克或模糊,調整大小、撤回編輯並匯出PNG。

圖片重疊比較

以可調洋蔥皮透明度、可拖曳垂直百葉窗與紅色像素差異比較同尺寸圖片,下載目前PNG檢視。

圖片反色與負片效果轉換器 (Invert Image)

以瀏覽器 Canvas 的 invert(1) 濾鏡繪製解碼圖片並匯出新的 PNG;精確色彩與 Alpha 行為取決於瀏覽器濾鏡實作。

即時亮度與直方圖

透過即時預覽與前後亮度直方圖調整亮度和對比度,可選全域範圍拉伸以避免通道截斷。

圖片色相與飽和度調整

將本機圖片色相旋轉0–360°、飽和度設為0–300%,套用Canvas濾鏡並下載PNG。

雙色調漸層映射

將圖片亮度映射至兩種顏色,可選24款雙色調配色,並以完整尺寸下載PNG。

工具分類

圖片寬高調整器

透過 canvas 將圖片縮放至分別指定的寬與高;不自動保留長寬比。

居中裁切到指定尺寸

居中裁切到指定尺寸:按使用者輸入的寬高比和畫素尺寸對一張圖片進行居中裁切。

32×32 ICO 網站圖標生成器

產生內含單一 32×32 PNG 項目的 ICO;不封裝 16×16 或 48×48 版本。

圖片順時針旋轉 90°

將解碼圖片順時針旋轉 90°,交換寬高匯出 PNG;不提供翻轉或任意角度。

圖片九宮格與朋友圈拼圖切分器 (Grid Slicer)

將圖片固定切成 3×3,提供九張獨立 PNG;邊緣可能有透明填充,不產生 ZIP。

社群圖片預設尺寸調整器

將圖片置中裁切至社群媒體尺寸預設並匯出 PNG;邊緣內容會被捨棄。

長寬比約分計算器

根據已知尺寸與預設或自訂長寬比,反算未知寬度或高度。顯示保留小數的像素尺寸與 CSS aspect-ratio。選用的 JSON 工作區仍可使用最大公因數約分既有寬高比例。

像素與 DPI 實體尺寸計算器

依目標 DPI 比較 4R / 6 吋(4 × 6 英吋)、7 吋(5 × 7 英吋)、A3、A4、A5 紙張所需像素,各邊向上取整。JSON 計算器亦可將像素尺寸換算為英吋與公分。

iOS 與 Android 圖示套件

產生含18個PNG欄位與Contents.json的iOS AppIcon.appiconset,及五種密度的Android一般、圓形與自適應圖示資源。

多圖片拼接

將2–20張本機圖片水平或垂直拼接,調整排序、間隙與外邊框,自動等寬或等高並儲存一張PNG。

圖片形狀遮罩

將本機圖片套用圓形、心形、六邊形或可調圓角矩形,下載外側透明的PNG。

工具分類