The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →To convert an HTML <img> to a JPG in JavaScript, wait until the image has loaded, draw its pixels onto a canvas, then export the canvas as image/jpeg. Use toBlob() for downloads, especially for large images. If the image is a local file or you need batch/server-side conversion, use ImageMagick instead. The right method depends on whether you want the rendered pixels in a webpage or the underlying image file.
Choose the right conversion method
| Method | Best for | Input and output | Main constraint |
|---|---|---|---|
| Browser canvas | Converting an image already displayed in a webpage, or letting a visitor download it | Draws rendered image pixels and exports a new JPEG | Cross-origin image permissions can prevent export |
| ImageMagick | Converting files in scripts, on a server, or in batches | Reads an image file and writes a JPEG file | Requires ImageMagick to be installed where the command runs |
| ScreenshotNeo | Capturing a webpage or rendered page region as an image, rather than converting an existing image file | Returns a screenshot in PNG, JPEG, or WebP | Captures a page; it is not a general-purpose image-file conversion command |
Canvas is the direct choice when “HTML image” means an <img> element in a page. ImageMagick is usually more suitable when you have source files to convert. A screenshot API is useful when the desired output is a capture of a page’s appearance, not necessarily the original image asset.
Convert an <img> to JPG in the browser
This example waits for the user to click Download, checks that the image loaded, draws it at its intrinsic pixel dimensions, and downloads a JPEG made with toBlob(). Set the canvas background explicitly: JPEG has no transparency, so transparent source pixels need a chosen matte color.
<img id="source" src="image.png" alt="Image to convert">
