如何在瀏覽器中把 iPhone 的 HEIC 轉成 JPG,無需桌面轉換器或上傳
HEIC from iPhone in the browser — no desktop converter, no upload
作者建議在瀏覽器本機把 iPhone 的 HEIC 轉成 JPG,無需桌面應用程式或上傳檔案;轉換前可用已遮蓋資料的樣本檢查網絡請求,並在離線模式測試。完成後在另一個應用程式核實 JPG,再關閉分頁;若產品必須支援 HEIC,則應在應用程式中處理解碼。
I still get HEIC files dropped into Slack with a cheerful "can you resize this for the docs?" They look fine on the sender's Mac. They open as a mystery blob on my Linux box, and half the preview tools just shrug.
For a long time my default was: AirDrop to a Mac, open Preview, Export as JPEG, send it back. Or worse — upload to whichever "free HEIC converter" ranked first that week, wait for a download, hope the file wasn't sitting on someone else's disk. That worked until I started treating staging screenshots and unreleased UI as sensitive by default.
These days I convert HEIC → JPG in the browser and leave. No desktop app, no account, no "we delete in 24h" promise I can't audit.
Why HEIC shows up in frontend work
iPhones default to HEIC. Designers and PMs on iOS share photos that way without thinking. Frontend folks then need a JPG (or PNG) for:
- Docs / Notion / GitHub markdown that won't render HEIC
- Lighthouse / LCP samples where you want a boring baseline format
- PR comments that reviewers can open on Windows or Linux
- Tiny marketing crops that shouldn't require Photopea + an account
It's a one-off file job, not a product feature. That matters: the right fix is usually transform once and move on, not wire heic2any into the app.
The upload tax is the real bug
Most "HEIC to JPG online" tools still POST the bytes. Even when the UI feels local, the Network panel tells on them. For client UI, brand marks, or anything from a private beta, that's the wrong default.
What I want for this job:
-
File stays in the tab —
FileReader/ WASM / canvas, thenURL.createObjectURLfor download - No signup before the download button works
- Survives Offline in DevTools (cheap litmus test)
-
Boring output — a real
.jpgI can open in another tool, not a "close enough" re-encode with a surprise watermark
If step 3 fails, I close the tab.
A quick Offline check I actually run
Before I trust a converter with a real file:
// After dropping a redacted sample HEIC and clicking Convert:
performance.getEntriesByType("resource")
.filter((r) =>
r.initiatorType === "fetch" ||
r.initiatorType === "xmlhttprequest"
)
.map((r) => r.name);
If convert fires a POST to some api.* host, it wasn't local. Flip Offline and try again — if export dies, same conclusion.
I keep a redacted sample HEIC (no faces, no product UI) for that first pass. Never test the trust model with the real asset.
Browser-local HEIC → JPG without a desktop app
The loop I reuse:
1. Redacted sample first
2. Open a browser-local HEIC→JPG tool
3. Drop file → convert → download JPG
4. Verify in a second app (Preview / feh / Photos)
5. Close the tab (don't leave the bytes in IndexedDB forever)
6. Only then run the real file
Under the hood the good tools are doing some flavor of decode → canvas/draw → toBlob('image/jpeg'). You can roll your own with a WASM decoder if this is a daily pipeline. For "someone Slack'd me three HEICs," a solid tab beats a side project.
When I need that tab fast, I've used Uwarp's HEIC to JPG tool — drop the file, convert in the browser, download. Worth trying when you don't want Preview, ImageMagick, or another upload site in the critical path.
When you should put HEIC support in the product
Sometimes the one-off habit is the wrong answer:
- Users upload camera rolls and you must accept HEIC at the API boundary
- You're building an editor that should round-trip EXIF / orientation
- Marketing wants "works with iPhone photos" as a checked feature
Then own the decode path in the app (server-side or WASM), add tests for orientation, and don't paper over it with "please export as JPG first" copy. That's product work.
For internal docs and PR screenshots? Keep it out of the codebase. Convert once, commit the JPG, move on.
DX note: agents and HEIC
If an agent is helping with asset pipelines, don't ask it to "fix the HEIC" by inventing a random CDN upload. Give it a constrained prompt: browser-local convert or ImageMagick locally; no third-party upload of product assets. Agents default to whatever Stack Overflow snippet looks fastest — which is often the upload path you're trying to avoid.
What I stopped doing
- AirDrop → Preview → Export as the only path on a Linux day
- Pasting unreleased UI into the first Google result for "heic to jpg"
- Trusting a green progress bar without checking the Network panel
- Installing a one-purpose desktop converter for a job that finishes in a tab
HEIC from iPhone is a format mismatch, not a collaboration problem. Fix it in the browser, verify the JPG, close the tab. If you want a concrete starting point, the HEIC → JPG page on Uwarp is the one I've reached for when Preview isn't around.
來源:DEV Community · dev.to