Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
jsPDF’s “Invalid Image” error usually means the value passed to addImage is not a supported image input, its data is incomplete, or its declared format does not match its bytes. Pass a valid data URL, a loaded image or canvas element, a Uint8Array, or supported RGBA data; for remote images, load or convert the image before adding it. Then verify the image bytes and test against the exact jsPDF version your app uses.
What jsPDF means by “Invalid Image”
addImage adds image data to a PDF and throws an error when the input cannot be interpreted as valid image data. Supported inputs include a base64 data URL, an HTMLImageElement, an HTMLCanvasElement, a Uint8Array, or an RGBAData object. The documented format argument can be JPEG, PNG, or WEBP. See the jsPDF addImage API documentation.
A string that looks like an image URL is not necessarily image data in the representation that addImage expects. A data URL includes metadata and a base64 payload, such as data:image/png;base64,.... Raw image bytes are a different supported input and should be passed as bytes, not as an arbitrary URL string.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use an input representation jsPDF supports
Canvas: pass its data URL
For a canvas you control, export an image data URL and pass the matching format:
#1 Best Overall
import { jsPDF } from "jspdf";
const canvas = document.querySelector("canvas");
if (!canvas) throw new Error("Canvas not found");
const dataUrl = canvas.toDataURL("image/png");
const pdf = new jsPDF();
pdf.addImage(dataUrl, "PNG", 10, 10, 100, 70);
pdf.save("output.pdf");toDataURL("image/png") returns a complete data URL, including the prefix. Keep that prefix when giving the string to addImage.
Image element: wait until it has loaded
When you have an image element, wait for its load event before calling addImage. Also handle load errors so a failed request does not become a confusing PDF-generation failure:
import { jsPDF } from "jspdf";
const image = new Image();
image.onload = () => {
const pdf = new jsPDF();
pdf.addImage(image, "JPEG", 10, 10, 100, 70);
pdf.save("output.pdf");
};
image.onerror = () => {
console.error("Image could not be loaded");
};
image.src = "/images/photo.jpg";Use the format that matches the actual image. An image element that has not finished loading may not yet contain usable image data.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsRaw bytes: pass a typed array
If you already have an ArrayBuffer, convert it to a Uint8Array and pass the bytes directly. State the image format when needed:
import { jsPDF } from "jspdf";
const response = await fetch("/images/photo.png");
if (!response.ok) throw new Error(`Image request failed: ${response.status}`);
const arrayBuffer = await response.arrayBuffer();
const bytes = new Uint8Array(arrayBuffer);
const pdf = new jsPDF();
pdf.addImage(bytes, "PNG", 10, 10, 100, 70);
pdf.save("output.pdf");This pattern keeps the payload as binary bytes instead of mistakenly passing a resource URL where an image-data string is expected.
RGBA data: pass pixel data in the documented structure
For code that has raw pixels rather than an encoded PNG or JPEG, use the RGBAData object shape supported by the version of jsPDF in your project. The object must contain valid pixel data and dimensions; arbitrary objects or a string containing pixel values are not interchangeable with this input. Check the API documentation for the current structure before constructing it.
Diagnose the input before changing formats
- Check the value and its type. Log the input type and, for strings or typed arrays, its length. Confirm it is a data URL, loaded image or canvas element,
Uint8Array, or valid RGBAData object. - Inspect a string’s prefix and payload. For example, a PNG data URL begins
data:image/png;base64,. The payload after the comma must be present and complete. Do not remove the prefix when passing a data URL. - Match format to bytes. A PNG payload passed with
JPEG, or a URL string passed as though it were base64 image data, can fail. Do not trust a filename or caller-provided label without checking how the data was produced. - Check transport and storage. Compare the original image with the value received by the PDF-generation code. A truncated base64 string or altered bytes can make an otherwise valid image unusable.
- Reduce to a minimal reproduction. Try the same image, input representation, and jsPDF version in a small script. If the minimal case works, compare how the application fetches, transforms, or stores the input.
Handle remote images by loading them first
A remote URL is a location, not itself an encoded image payload. A jsPDF issue reporter encountered Supplied Data is not a valid base64-String when passing a URL directly and reported fixing it by supplying base64 data instead (jsPDF issue #2201). Normalize the remote resource before calling addImage: fetch it as bytes and pass a Uint8Array, or load it into an image element and pass the loaded element.
Browser-origin rules can also affect whether a remote image can be read back through canvas operations. If your workflow draws an image to a canvas and exports it with toDataURL, serve the image with suitable cross-origin access or use an image hosted by your application. A successful network request alone does not guarantee that the browser will allow canvas export.
When PNG fails but another input works
PNG is usually the first choice when transparency matters, but reports show that particular PNG files and jsPDF versions can expose decoder or compatibility problems. Issue #3004 describes certain PNG images that failed when added directly while a canvas-generated data URL worked; the reporter also said JPEG worked as a fallback (jsPDF issue #3004). This is an observed case, not a guarantee that canvas conversion fixes all PNGs.
Rank #4
One useful diagnostic is to decode and redraw the image through a browser canvas, then export that canvas as PNG and test the resulting data URL. If that succeeds, the original file’s encoding or decoder path may be involved. Treat the converted data URL as a new test input, not proof that every source PNG is safe.
Choose a fallback without losing image properties
- PNG: Prefer it when transparency or crisp graphics matter. If it fails, test a re-rasterized canvas PNG and verify that the output still looks right.
- JPEG: A practical option for opaque photographs. JPEG does not preserve alpha transparency, so a transparent image may acquire an unwanted background when converted.
- WEBP: The API lists WEBP as a supported format, but issue #3359 reported conversion differences in the versions tested there. Verify the result in your own jsPDF version rather than assuming the output will match another format.
Issue #3359 also reports a canvas PNG working in jsPDF 2.3.1 and below but failing in 2.4.0 and 2.5.0, with black JPEG backgrounds or WEBP conversion differences in that report (jsPDF issue #3359). These are version-specific user observations, not universal behavior across images or installations.
Recognize truncation and version-specific failures
“Incomplete or corrupt PNG file”
This message points toward data that cannot be decoded as a complete PNG. Retrieve the original bytes again and check every point where they are encoded, copied, stored, or transmitted. In issue #662, a known-good PNG data URL succeeded where application-supplied data failed (jsPDF issue #662). Compare the exact values rather than assuming the application’s base64 conversion preserved them.
Test the version you actually ship
Reports have described different outcomes across jsPDF releases: issue #2201 compares 1.4.1 and 1.5.3, while issue #3359 compares 2.3.1 with 2.4.0 and 2.5.0. Those comparisons establish what the reporters saw, not a blanket compatibility table. Record the installed version, make a minimal reproduction with the exact input bytes, and test a version change only after isolating the representation and file.
Or skip the browser setup
If the image you need comes from a webpage, ScreenshotNeo can return a screenshot as an image or PDF from one GET request. For example, retrieve a page image and then use its downloaded bytes as the image input in your own PDF workflow:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options and output settings. It accepts cookie banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers say which page verdict applies and whether the request was billed. Its MCP server gives Claude, Cursor, and other MCP clients the tools take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Frequently Asked Questions
Does jsPDF accept a base64 string without a data-URL prefix?
For a data URL input, keep the complete `data:image/…;base64,` prefix. Raw bytes are supported separately as a `Uint8Array`.
Can I pass a URL directly to `addImage`?
Do not rely on that behavior across releases. Load the image or fetch it as bytes first, then pass a supported input representation.
Will converting every failing PNG to JPEG fix it?
No. JPEG removes transparency, and format conversion may change appearance. Test the converted output and retain PNG when alpha matters.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
