Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallTwo separate settings cause the symptoms in this Angular 6 example: sending a PNG data URL to window.location.href does not give the browser a useful filename, and constructing jsPDF with 'a4' explicitly makes the PDF page A4. Download the canvas through an anchor with a download filename, and configure jsPDF with the physical page dimensions you actually want. If captured images are missing, check their origin and CORS headers; html2canvas cannot bypass browser security rules.
The reported example dates to 2018 and does not identify the installed html2canvas or jsPDF versions. The code below shows the relevant browser patterns, but check your package.json or lockfile and the documentation for your installed versions before copying an import or constructor signature.
Fix the image filename with an anchor download
A canvas exported with toDataURL('image/png') contains PNG data, but assigning that URL to window.location.href is navigation, not a reliable named-file download. The browser may display the image or handle the data URL differently depending on its security context. Use an anchor element, set its download property to a filename ending in .png, and click it.
html2canvas(element).then(canvas => {
const link = document.createElement('a');
link.download = 'card.png';
link.href = canvas.toDataURL('image/png');
link.click();
});This is the html2canvas project’s documented download pattern. It requests a PNG data URL and suggests a filename to the browser. Browser support and security restrictions still govern the final behavior; the filename is not a guarantee that every browser will save rather than open the content.
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 →#1 Best Overall
Use the MIME type that matches the file
For PNG, keep canvas.toDataURL('image/png') and use a .png filename. Avoid replacing the MIME type with image/octet-stream and navigating to it when the aim is a predictable named image download. If you want JPEG instead, request image/jpeg and use a .jpg or .jpeg filename; the browser’s encoding quality can optionally be supplied as the second argument to toDataURL for supported formats.
Angular component example
Pass the actual card element to the capture routine. For example, with a template reference:
<mat-card #cardToExport>
<!-- card content -->
</mat-card>
<button type="button" (click)="downloadCard()">Download PNG</button>In the component, obtain that element and call html2canvas. The exact import syntax depends on the version installed in this Angular 6 project; verify it against the project’s dependency lockfile rather than assuming a current example will compile unchanged.
@ViewChild('cardToExport', { static: false }) cardToExport;
downloadCard() {
html2canvas(this.cardToExport.nativeElement).then(canvas => {
const link = document.createElement('a');
link.download = 'card.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
}In Angular versions or typings where ViewChild requires a different declaration, adapt that declaration to the installed Angular version. The essential fix is the anchor’s download attribute, not a particular component syntax.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsMake the PDF page match the card dimensions
The reported constructor explicitly requests portrait A4 with new jspdf('p', 'mm', 'a4'). The later imgWidth = 208 value controls how wide the image is placed on that page; it does not resize the PDF page. So the page remains A4 even if the card image has a different shape.
Choose physical dimensions first
Decide the intended PDF page width and height in a real unit, such as millimeters, inches, or points. If the goal is to produce a page exactly as large as the card when printed, decide what physical size the card should have; CSS pixels alone do not specify a unique print size without a conversion choice. The original example does not say what physical card size is intended, so its 208 mm image width should not be treated as a standard or as the correct page width.
jsPDF supports a custom format given as [width, height] in the selected unit. Current jsPDF documentation also shows an options-object constructor; current syntax may not match an older jsPDF version installed alongside Angular 6. Use the form supported by your version.
// Illustrative current options-object form; confirm against your installed jsPDF version.
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: [pageWidthMm, pageHeightMm]
});Here pageWidthMm and pageHeightMm must be chosen for your output, not copied as universal card dimensions. A custom width and height define the page. Image placement is a separate decision.
Rank #3
Fit the raster capture without distortion
Canvas dimensions are pixels; jsPDF page dimensions are physical units. To preserve the card’s proportions, calculate the image’s aspect ratio from canvas.width / canvas.height, then fit it inside the page bounds. For a page of width pageWidth and height pageHeight, use the smaller of pageWidth / imageWidth and pageHeight / imageHeight as the scale factor. This fills as much of the page as possible without stretching, and leaves whitespace on one axis when the aspect ratios differ.
const imageWidthPx = canvas.width;
const imageHeightPx = canvas.height;
const scale = Math.min(pageWidthMm / imageWidthPx, pageHeightMm / imageHeightPx);
const placedWidthMm = imageWidthPx * scale;
const placedHeightMm = imageHeightPx * scale;
const x = (pageWidthMm - placedWidthMm) / 2;
const y = (pageHeightMm - placedHeightMm) / 2;
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', x, y, placedWidthMm, placedHeightMm);
pdf.save('MYPdf.pdf');This is a layout pattern: define pageWidthMm and pageHeightMm consistently with the format used to create the PDF, and verify that your jsPDF version supports the shown addImage and save calls. If you instead force the image to the full page width and height, it may stretch and distort. Cropping can fill a page with a different aspect ratio, but cuts off part of the card; preserving the entire card means accepting whitespace when the ratios differ.
Consider output resolution
A PDF containing a canvas capture contains raster image content. Enlarging that image on the physical page does not add detail; a low-resolution capture may look soft when printed or zoomed. Capture the card at an appropriate viewport and scale for its intended display or print size, while keeping browser canvas limits in mind. There is no single pixel-to-millimeter conversion that determines both page size and sharpness: page dimensions set physical layout, while canvas pixel dimensions determine available raster detail.
Fix missing images by checking origin and CORS
When an image is hosted on a different origin, the browser’s same-origin policy affects whether it can be drawn into an exportable canvas. html2canvas skips images that would taint the canvas by default. Its FAQ states: “html2canvas cannot circumvent content policy restrictions set by your browser.” Setting useCORS: true can help only when the image server returns an appropriate Access-Control-Allow-Origin response header.
Choose an image-hosting approach
- Same-origin asset: serve the image from the same origin as your Angular page. This avoids the cross-origin image issue.
- Cross-origin asset with CORS: configure the remote server to allow your page’s origin, then use
useCORS: truein html2canvas options. - Same-origin proxy: when you cannot configure the image host, arrange for an appropriate server-side proxy to serve the asset from your own origin. Ensure the proxy is safe and restricted to intended resources.
html2canvas(element, { useCORS: true }).then(canvas => {
// Export canvas after confirming remote images are served with suitable CORS headers.
});useCORS is not a bypass and cannot grant access the remote server has not allowed. Setting allowTaint does not make a tainted canvas readable for export; if the browser blocks access to pixel data, the image export still cannot reliably produce the desired result.
Diagnose blank, incomplete, or visually different captures
Capture is blank or cut off
The html2canvas FAQ recommends matching windowWidth and windowHeight to the element’s scroll dimensions when viewport dimensions cause incomplete captures. Inspect the card’s scroll width and height and try those dimensions when the output clips content. Very large canvases can also fail or produce incomplete output; maximum canvas dimensions depend on browser, platform, and device, so do not rely on one universal pixel threshold.
Some CSS or content differs from the visible page
html2canvas does not take a literal screenshot of the rendered browser surface. The project documentation explains, “The script traverses through the DOM of the page it is loaded on.” It reconstructs a representation from DOM and style information, and unsupported CSS properties may render differently. If a particular style is missing, check whether that property is supported by the html2canvas version you have installed and consider whether the layout can be simplified for export.
Images disappear only in the export
- Check that each image URL loads in the page before capture.
- Identify whether each image is same-origin or cross-origin.
- For cross-origin images, verify the response includes a suitable CORS header; then try
useCORS: true. - If the remote server cannot allow your origin, use a suitable same-origin proxy or another authorized image source.
Use a browser screenshot API when you need the rendered page, not a DOM card export
If your target is a public page URL rather than an Angular card already rendered in the current browser, ScreenshotNeo is a website screenshot API and MCP server for developers. It captures a URL in a browser service rather than exporting the current Angular component’s in-memory DOM; it therefore does not replace the component-specific canvas method above. Its capture options include full-page output and selector-based element capture, which can be useful when the card exists at a reachable page URL.
Recommended Free Tools
Or skip the browser setup
For a URL you can access, request a screenshot with one GET call. This example saves the returned response body; check the API response and requested format if you need a particular image type or a PDF.
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 details. ScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses report page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for the free plan: 1,000 screenshots a month, no card required.
Common mistakes and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| Image opens as data or has no useful extension | Data URL assigned to window.location.href |
Use an anchor with download = 'card.png' and a matching PNG data URL. |
| PDF stays A4 | The constructor explicitly specifies 'a4' |
Use a custom format based on intended physical width and height. |
| Card is stretched in PDF | Image width and height forced to page bounds independently | Scale proportionally; accept whitespace or intentionally crop instead. |
| Cross-origin images vanish | Remote server does not permit canvas access | Use same-origin hosting, configure CORS, or use a suitable proxy. |
| Output clips a long element | Capture viewport is too small or canvas exceeds platform limits | Try element scroll dimensions for windowWidth/windowHeight; reduce capture size if needed. |
Version and implementation checks for Angular 6
The original question identifies Angular 6 but omits html2canvas and jsPDF versions. Before changing imports or constructors:
- Read the installed versions in
package.jsonand the package lockfile. - Use the documentation or release notes for those exact versions to confirm import syntax, constructor options, custom page format, and image methods.
- Test both outputs with a small card: confirm the downloaded filename, image format, PDF page dimensions, and whether the output retains all content.
- Keep browser console errors and network responses available while investigating cross-origin assets; the remote image server’s headers determine whether
useCORScan work.
Frequently Asked Questions
Does changing image/png to image/octet-stream create a PNG filename?
No. The filename is suggested separately through the anchor’s download property; keep the PNG data URL MIME type as image/png.
Can html2canvas capture a mat-card element directly?
Yes, pass the card’s DOM element to html2canvas. It reconstructs the element from DOM and supported styles rather than taking a literal browser screenshot.
Will useCORS: true make every remote image exportable?
No. The image server must allow the page’s origin with an appropriate CORS response header.
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.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
