Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To center an image on a jsPDF page, calculate the remaining space on each axis and divide it by two:
const x = (pageWidth - imageWidth) / 2;
const y = (pageHeight - imageHeight) / 2;
doc.addImage(imageData, 'PNG', x, y, imageWidth, imageHeight);Use the active page’s actual width and height, keep all values in the document’s units, and calculate the image’s rendered dimensions before calculating x and y. jsPDF measures x from the left edge and y from the top edge. See the official addImage API and page-size API documentation.
Center an image on the full PDF page
addImage places an image at an explicit coordinate and size. It does not automatically center or fit the image. The basic calculation is:
x = (W - w) / 2y = (H - h) / 2
W and H are the active page dimensions; w and h are the image’s rendered dimensions. Every value must use the same unit declared when you created the jsPDF document, such as mm, pt, in, or px.
#1 Best Overall
Complete browser example
import { jsPDF } from 'jspdf';
const doc = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4'
});
const imageData = 'data:image/png;base64,...'; // supply your data URL
const imageWidth = 100;
const imageHeight = 70;
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const x = (pageWidth - imageWidth) / 2;
const y = (pageHeight - imageHeight) / 2;
doc.addImage(imageData, 'PNG', x, y, imageWidth, imageHeight);
doc.save('centered-image.pdf');The addImage documentation lists data URLs, image elements, canvas elements, byte arrays, and RGBA data as accepted image inputs. The current type declarations also include optional alias, compression, and rotation arguments; those options do not change the centering arithmetic.
Get dimensions for the active page
Do not hard-code A4 dimensions if your code can create different paper sizes or orientations. Read the current page:
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();Call these accessors after creating the document and whenever your code changes the page. In a multi-page document, dimensions can differ if you add pages with another format or orientation.
Landscape pages
const doc = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'a4' });
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const w = 180;
const h = 100;
doc.addImage(imageData, 'JPEG', (pageWidth - w) / 2, (pageHeight - h) / 2, w, h);Using the accessors means the same code works for portrait and landscape pages without assuming which dimension is larger.
Preserve the image’s aspect ratio
The API accepts both rendered width and height, so supplying arbitrary values can stretch the image. If you know the source dimensions, scale them by one common factor:
function containSize(sourceWidth, sourceHeight, maxWidth, maxHeight) {
const scale = Math.min(maxWidth / sourceWidth, maxHeight / sourceHeight, 1);
return {
width: sourceWidth * scale,
height: sourceHeight * scale
};
}
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const margin = 15;
const size = containSize(
1600,
900,
pageWidth - margin * 2,
pageHeight - margin * 2
);
const x = (pageWidth - size.width) / 2;
const y = (pageHeight - size.height) / 2;
doc.addImage(imageData, 'JPEG', x, y, size.width, size.height);This “contain” calculation keeps the entire image visible within the page margins. The final Math.min(..., 1) prevents enlarging a smaller source image; remove that limit if enlargement is intentional.
Center inside a content rectangle
Often the page is not the intended target. To center inside a panel, header, or margin-bounded region, define its left offset L, top offset T, width Cw, and height Ch:
Recommended Free Tools
const left = 20;
const top = 30;
const contentWidth = pageWidth - 40;
const contentHeight = 120;
const imageWidth = 100;
const imageHeight = 70;
const x = left + (contentWidth - imageWidth) / 2;
const y = top + (contentHeight - imageHeight) / 2;
doc.addImage(imageData, 'PNG', x, y, imageWidth, imageHeight);The offsets matter: omitting left or top centers relative to the page rather than the content region.
Center horizontally only
To center across a region while keeping a fixed top position, calculate only x:
const x = left + (contentWidth - imageWidth) / 2;
const y = top;
doc.addImage(imageData, 'PNG', x, y, imageWidth, imageHeight);Center vertically only
const x = left;
const y = top + (contentHeight - imageHeight) / 2;
doc.addImage(imageData, 'PNG', x, y, imageWidth, imageHeight);Use image elements or canvas safely
When the source is an HTML image, wait until it has loaded before reading its dimensions or passing it to jsPDF:
const img = new Image();
img.onload = () => {
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const maxWidth = pageWidth - 20;
const maxHeight = pageHeight - 20;
const scale = Math.min(maxWidth / img.naturalWidth, maxHeight / img.naturalHeight, 1);
const w = img.naturalWidth * scale;
const h = img.naturalHeight * scale;
doc.addImage(img, 'PNG', (pageWidth - w) / 2, (pageHeight - h) / 2, w, h);
doc.save('centered.pdf');
};
img.onerror = () => console.error('The image failed to load');
img.src = '/images/photo.png';For cross-origin images, the browser may block canvas access unless the remote server supplies appropriate CORS headers. A failed load or tainted canvas must be fixed at the hosting or proxy layer; changing the centering formula cannot bypass browser security.
Prevent oversized or clipped images
If w exceeds W or h exceeds H, the centered coordinate becomes negative. That is mathematically centered, but part of the image lies outside the page. Resize first when the complete image must be visible:
const margin = 10;
const availableWidth = pageWidth - margin * 2;
const availableHeight = pageHeight - margin * 2;
const scale = Math.min(availableWidth / sourceWidth, availableHeight / sourceHeight);
const w = sourceWidth * scale;
const h = sourceHeight * scale;
const x = (pageWidth - w) / 2;
const y = (pageHeight - h) / 2;If the image is deliberately larger than the page, negative coordinates are expected. Check the PDF viewer at high zoom to distinguish intentional cropping from an accidental unit or dimension error.
Common problems and fixes
The image is offset
- Verify that page and image values use the same unit.
- Read dimensions with
doc.internal.pageSize.getWidth()andgetHeight()rather than assuming paper size. - Check that
xis based on width andyon height; swapping them produces a diagonal offset. - For a content region, include its
leftandtopoffsets.
The image is stretched
Recalculate width and height with one scale factor from the source aspect ratio. Never independently force both dimensions unless distortion is acceptable.
The image is clipped
Inspect for negative coordinates and scale against the available page rectangle. Include margins in the maximum width and height.
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 matchThe image does not appear
- Confirm the image data is a valid data URL, supported element, byte array, or RGBA value.
- Use the correct format string, such as
'PNG'or'JPEG'. - Wait for an image element’s
onloadevent. - Check browser CORS errors when loading another origin.
Coordinates differ between pages
Re-read the active page dimensions after adding or switching pages. A document can contain different formats and orientations.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, output size, and reliability notes
- Large raster images increase memory use and PDF size; resize to the maximum rendered dimensions before embedding.
- JPEG is often smaller for photographs, while PNG is appropriate for transparency or sharp interface graphics.
- Use the optional compression setting documented by jsPDF when output size matters, then inspect visual quality.
- Keep the arithmetic in one helper function so every page uses the same rounding, margin, and fit policy.
- Round only for presentation if needed; premature rounding can create small alignment differences.
Or skip the browser setup
If your goal is to obtain a clean webpage image before placing it in a PDF, ScreenshotNeo provides a website screenshot API. A single request returns PNG, JPEG, WebP, or PDF, and the service can load lazy images, wait for a selector or network idle, select one element, set a viewport or device preset, and apply custom CSS.
It removes cookie-consent banners, newsletter popups, and chat widgets before capture. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and whether it was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
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 documentation for authentication and options. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo.
Key API facts
According to the jsPDF addImage documentation, the method “Adds an Image to the PDF.” Its position is always controlled by the supplied coordinates and rendered dimensions; centering is your layout calculation.
Frequently Asked Questions
Does jsPDF center images automatically?
No. Calculate the coordinates from the target rectangle and pass them to addImage.
Which units does addImage use?
It uses the units selected when the jsPDF document was created, so page dimensions, image dimensions, margins, and coordinates must match.
Can I center an image after rotating it?
Calculate the final rendered bounding dimensions you intend to occupy, then center that rectangle; rotation itself does not provide automatic layout.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick 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.
