合集23 个工具
图片工具
十八个基于 canvas 的工具,覆盖人们真正会对图片做的四件事:变小、改格式、改构图、变得拿得出手。
本页的深度指南以英文和阿拉伯文撰写。其他语言显示英文原文。
Almost every image job is one of four things. Make this smaller, because a form has a 200KB limit or a page is loading too slowly. Change this format, because something upstream will not accept HEIC or something downstream wants AVIF. Change the framing — crop, resize, rotate to fit a slot. Or make it presentable: add a watermark, cover up something sensitive, put a screenshot in a device frame.
All four are pure pixel work, which is why the browser handles them so well. The canvas element decodes, transforms and re-encodes images natively, using the same code paths the browser uses to render every image you see. There is no meaningful quality advantage to doing this on a server; a JPEG encoded by Chrome at quality 0.8 is a JPEG encoded at quality 0.8. What a server offers is a queue for very large batches, and what it costs is that your images went somewhere.
These tools go from the mundane to the specific, and the mundane ones are the ones people return to.
Hitting a number, not guessing at a slider
Image Compression has the feature most compression tools are missing: a target file size. Instead of nudging a quality slider and re-exporting until the number is under the limit, you say '200KB' and it runs a binary search — probing quality levels between 0.30 and 0.95, then stepping the dimensions down if quality alone cannot get there, and accepting as soon as it is within a sensible margin of the budget. It is a small thing that removes an entire category of tedium, and it exists because government portals, job applications and university systems still impose byte limits with no guidance on how to meet them.
Two consequences worth knowing. Target mode is inherently lossy, so a PNG in target mode is converted to JPEG — a lossless format cannot be tuned to an arbitrary byte budget. And there are also auto, aggressive and manual-quality modes for when you do not have a specific number to hit and just want the file smaller.
Image Resizer covers the dimension side: exact pixels, a percentage, a longest-side constraint, or named presets, with crop and watermark tabs on the same loaded image so you are not passing a file between three tools. Crop Image is the focused version, with a draggable crop rectangle and aspect-ratio locks for the ratios you actually need.
Formats, including the awkward ones
Format Converter outputs PNG, JPEG, WebP and AVIF. Three of those the canvas can encode directly; AVIF it cannot, at all, in any current browser. So AVIF encoding is done by a WebAssembly encoder that loads on demand — which is why an AVIF export takes noticeably longer than a WebP one, and why AVIF is worth it anyway when the file-size difference matters more than the seconds.
On the input side, the awkward format is HEIC — the default on iPhones, and rejected by a great many upload forms. HEIC files are decoded through a HEIC decoder that runs in your browser before the conversion runs, so 'photo from my phone that this website will not accept' has a two-step answer that does not involve emailing yourself the photo to force a conversion. The tool also verifies that the encoder actually produced the format you asked for, rather than silently handing back a PNG with a WebP file extension, which is a real failure mode elsewhere.
SVG to PNG rasterises vector artwork at a chosen multiplier, which is how you get a 2x or 3x asset out of an icon. It needs the SVG to declare intrinsic dimensions, and external references inside the SVG will not resolve — both are consequences of rendering through the browser's image pipeline rather than a full SVG renderer. SVG Tools is a different thing entirely: a visual editor for tweaking shapes and colours in an SVG directly.
Cleaning up and covering up
EXIF Remover and EXIF Viewer handle the invisible payload — camera model, timestamps, and frequently GPS coordinates precise enough to identify a home address. The viewer shows you what is there; the remover strips it by redrawing the pixels, which means a JPEG is re-encoded rather than surgically edited.
Photo Censor covers the visible payload: draw regions and apply blur, pixelation or a solid fill. Because the canvas is flattened on export, the censored pixels are actually gone rather than obscured by a layer that a determined recipient could remove. Watermark Image does the opposite — adds text or an image mark with opacity, rotation, positioning and a tiling mode.
Color Correction adjusts brightness, contrast, saturation, temperature, vibrance and exposure through per-pixel arithmetic rather than CSS filters, specifically so the export matches the preview. That distinction sounds pedantic until you have used a tool where it did not, and exported something that looked nothing like what was on screen.
Producing something for other people to look at
Favicon Generator renders your source at 16, 32, 48, 180, 192 and 512 pixels, hand-writes a genuine multi-image .ico file, and bundles the whole set with the HTML link tags and a web manifest into a zip — because the annoying part of favicons was never the resizing, it was remembering the six sizes and the markup.
Screenshot Beautifier pads a screenshot onto a gradient or solid background with rounded corners and a drop shadow, for changelogs and release posts. Phone Mockups composites a screenshot into a device frame, and does it by scanning the frame image's own pixels to find the screen area and its corner radius rather than trusting a hardcoded rectangle — which is why the screen lands correctly aligned rather than a few pixels off.
Photo Collage arranges several images in a grid with configurable gaps and rounded corners. Meme Generator does the Impact-with-a-black-outline thing with draggable text boxes and word wrap. Image Color Picker samples a pixel to HEX, RGB and HSL, keeps a history of recent picks, and extracts a dominant-colour palette from the whole image. And ASCII Art Generator maps luminance to characters across four ramps, exporting both text and a rendered image — which has no practical use whatsoever and is one of the most-used tools on the site.
Related collections
The image tools that use machine learning — background removal, object cutout, upscaling, captioning, depth estimation — are listed below and also gathered in on-device AI, because they behave differently: they download a model on first use and are much slower than the canvas operations here. For turning images into documents, see the PDF collection.
Twenty-three tools
Roughly ordered from the everyday to the occasional.
- Image CompressionImage ToolsGet under a byte limit. Target-size mode binary-searches quality and dimensions to hit the number.打开工具
- Format ConverterImage ToolsConvert between PNG, JPEG, WebP and AVIF, and decode HEIC from an iPhone on the way in.打开工具
- Image ResizerImage ToolsResize by exact pixels, percentage, longest side or preset — with crop and watermark on the same image.打开工具
- Background RemovalImage ToolsCut the background out of photos in a batch and export transparent PNGs.打开工具
- Object CutoutImage ToolsClick the object you want and get it as a transparent PNG; Alt-click to exclude parts.打开工具
- Image UpscalerImage ToolsDouble an image's width and height with a super-resolution model rather than plain stretching.打开工具
- Image CaptionerImage ToolsGet a short caption and a ready-to-paste alt attribute for a photo, as a draft to edit.打开工具
- Depth Map GeneratorImage ToolsEstimate depth from a single photograph and export it as a greyscale or colour-mapped PNG.打开工具
- Crop ImageImage ToolsCrop with a draggable rectangle and aspect-ratio locks.打开工具
- Watermark ImageImage ToolsAdd a text or image watermark with opacity, rotation, position and tiling.打开工具
- Photo CensorImage ToolsBlur, pixelate or block out regions, with the covered pixels destroyed in the export.打开工具
- EXIF RemoverImage ToolsStrip camera metadata and GPS coordinates before sharing a photo.打开工具
- EXIF ViewerImage ToolsSee what metadata an image is carrying, including GPS, before deciding what to do about it.打开工具
- Color CorrectionImage ToolsBrightness, contrast, saturation, temperature, vibrance and exposure, with the export matching the preview.打开工具
- Favicon GeneratorImage ToolsProduce every favicon size, a real .ico, the link tags and a manifest as one zip.打开工具
- SVG ToolsImage ToolsEdit shapes and colours in an SVG visually.打开工具
- SVG to PNGImage ToolsRasterise an SVG to PNG at 1x, 2x or higher.打开工具
- Image Color PickerDesign ToolsSample exact colours from an image and pull a dominant-colour palette out of it.打开工具
- Screenshot BeautifierImage ToolsPut a screenshot on a padded gradient background with rounded corners and a shadow.打开工具
- Phone MockupsImage ToolsDrop a screenshot into a device frame, with the screen area detected from the frame's own pixels.打开工具
- Photo CollageImage ToolsLay several images out in a grid with configurable gaps and corner radius.打开工具
- Meme GeneratorImage ToolsImpact, outlined, draggable, word-wrapped.打开工具
- ASCII Art GeneratorImage ToolsConvert an image to text art across four character ramps, exported as text or as an image.打开工具
What canvas cannot do
Encoding formats the browser does not support. AVIF is handled by a WebAssembly encoder precisely because canvas cannot encode it; JPEG XL and other emerging formats are not available at all. Anything the browser cannot decode cannot be opened, with HEIC as the deliberate exception because it is common enough to be worth a dedicated decoder.
Re-encoding without generational loss. Every canvas operation decodes to pixels and re-encodes on export. For JPEG that is a lossy round trip, so stripping metadata from a JPEG costs a little quality. Where a byte-exact metadata strip matters, a dedicated command-line tool is the right instrument.
Very large images and very large batches. Canvas has per-browser dimension limits, and everything is held in your tab's memory. A 100-megapixel panorama or a folder of several hundred RAW files is a job for a desktop application. Camera RAW formats are not supported at all — the browser cannot decode them.
Colour management. These tools work in sRGB. Wide-gamut and ICC-profiled workflows, print colour and 16-bit-per-channel editing are outside what canvas exposes.