The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Install the package whose name matches the import you write. For the currently documented scoped package, run npm install @html2canvas/html2canvas and import it with import html2canvas from '@html2canvas/html2canvas';. If your Angular 7 project already uses the legacy package, install html2canvas and import html2canvas instead. The two names are not interchangeable.
Choose the package and matching import
Run npm from the Angular workspace root—the directory containing package.json. Keep the dependency name, lockfile entry and TypeScript import path identical.
| Package form | Install command | Import | When it makes sense |
|---|---|---|---|
| Scoped, current documentation | npm install @html2canvas/html2canvas |
import html2canvas from '@html2canvas/html2canvas'; |
New code following the current html2canvas documentation |
| Legacy, unscoped | npm install html2canvas |
import html2canvas from 'html2canvas'; |
An existing Angular 7 application or lockfile already uses this package |
Do not install one form and import the other. That mismatch is the usual cause of Cannot find module errors. The available documentation describes both forms but does not publish a tested Angular-7-specific compatibility matrix, so verify the package version against your browser and TypeScript requirements before upgrading a working application.
Install html2canvas in an Angular 7 workspace
- Open a terminal in the Angular project root.
- Choose one package form and install it with npm.
- Confirm that the same name appears in
package.jsonand your import statement. - Restart the Angular development server after changing dependencies, especially if the compiler cached the previous module graph.
npm install @html2canvas/html2canvasFor a project that already has the unscoped dependency, use:
#1 Best Overall
npm install html2canvasAngular 7 applications that must support older browsers may also need a Promise polyfill. Check the browser support policy for that application; the legacy package documentation specifically calls out Promise support as a requirement for older browsers.
Import and capture an Angular element
html2canvas accepts a real browser DOM element and returns a Promise that resolves to a canvas. In Angular, capture after the view exists—normally from an event handler that runs after rendering. @ViewChild with static: false is appropriate for the Angular 7 pattern shown here.
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import html2canvas from 'html2canvas';
@Component({
selector: 'app-capture',
template: `
<section #captureArea class="capture-area">
<h2>Capture me</h2>
<p>This content will be rendered into a canvas.</p>
</section>
<button type="button" (click)="capture()">Save image</button>
`
})
export class CaptureComponent implements AfterViewInit {
@ViewChild('captureArea', { static: false })
captureArea!: ElementRef<HTMLElement>;
ngAfterViewInit(): void {
// The view is initialized; captureArea is now available.
}
async capture(): Promise<void> {
const canvas = await html2canvas(this.captureArea.nativeElement);
const dataUrl = canvas.toDataURL('image/png');
console.log(dataUrl);
}
}The non-null assertion operator (!) tells TypeScript that Angular will assign the view child before capture() is called. If the target is inside an *ngIf, do not call the method until that branch has rendered; otherwise the reference can still be undefined.
Download the resulting PNG
async capture(): Promise<void> {
const canvas = await html2canvas(this.captureArea.nativeElement);
const link = document.createElement('a');
link.download = 'capture.png';
link.href = canvas.toDataURL('image/png');
link.click();
}This code is browser-only. A data URL is convenient for a small image, while canvas.toBlob() is generally preferable when you need to reduce memory pressure for large captures or upload the result.
Render timing and Angular-specific details
Capture after the target is present
ngAfterViewInit guarantees that the component view has been initialized, but asynchronous data, fonts, images or an *ngIf can still change the pixels later. Call capture() from a button after the content is visible, or wait for the data and layout updates before invoking html2canvas.
Capture a child component
Put the template reference on the element you actually want rendered:
<app-invoice #invoice></app-invoice>For a component host, use ElementRef on that host or place a reference on an inner wrapper. html2canvas needs an HTMLElement, not an Angular component class.
Images and fonts
Wait until important images have loaded if the first render is incomplete. A delayed capture cannot make an inaccessible cross-origin image readable; that is a browser security issue rather than an Angular timing issue.
Recommended Free Tools
Rank #3
Browser, server-side rendering and security limits
Do not run html2canvas in Node.js
The library depends heavily on browser APIs and is not suitable for Node.js or server-side rendering. If the application uses Angular Universal, keep the import or invocation behind a browser-only path and never execute the capture during server rendering. A typical guard is:
import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
async capture(): Promise<void> {
if (!isPlatformBrowser(this.platformId)) {
return;
}
const canvas = await html2canvas(this.captureArea.nativeElement);
// Use the canvas here.
}Cross-origin images can taint the canvas
html2canvas cannot bypass the browser’s content-security rules. An image hosted on another origin may taint the canvas, causing export methods such as toDataURL() to fail. The documented remedy is a proxy that accepts a ?url= parameter and returns the image as a base64 data URI; pass that proxy through html2canvas’s proxy option.
const canvas = await html2canvas(this.captureArea.nativeElement, {
proxy: 'https://your-image-proxy.example/?url='
});Use a proxy only when you control its security and allow-listing. Do not expose an open image-fetching endpoint that can be abused to reach internal services.
Why the output may differ from the screen
html2canvas reconstructs a visual representation from the DOM and styles; it is not a native browser screenshot. Unsupported CSS, filters, browser-specific rendering, web fonts that have not finished loading and cross-origin resources can produce differences. For a faithful capture, simplify unsupported effects, wait for assets, and test in the browsers your users actually run.
Troubleshooting
“Cannot find module ‘html2canvas’”
- Check whether
package.jsoncontainshtml2canvasor@html2canvas/html2canvas. - Make the import string exactly match that name.
- Run npm in the directory containing the correct
package.json. - Remove and reinstall dependencies only if the lockfile or installation is genuinely inconsistent; preserve the lockfile when reproducibility matters.
“Cannot find module ‘@html2canvas/html2canvas’”
The scoped package is not installed, or the project is using the legacy package. Install the scoped package and keep its scoped import, or change both installation and import to the legacy pair.
The capture is blank or missing dynamic content
Ensure the target element is visible, the data has arrived, and the capture runs after Angular has applied the relevant change. For conditional content, trigger the capture from a user action after the condition becomes true.
Export throws a security error
Inspect images, SVGs and other remote assets. Configure appropriate CORS headers where you control the origin, or route images through a secure proxy using the proxy option.
It works locally but not in production
Compare production asset origins, CSP rules, lazy-loading behavior and browser versions. Production often serves images from a different domain, exposing cross-origin restrictions that were absent in development.
Older browsers fail before capture
Check Promise support and add the polyfill required by your Angular 7 browser-support policy. Also verify that the selected html2canvas package version still supports the browsers you must serve.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance and reliability practices
- Capture only the smallest useful element instead of the entire document.
- Do not start several large captures simultaneously; each canvas consumes memory.
- Wait for images and fonts once, then capture, rather than repeatedly retrying during layout changes.
- Release references to large canvases when finished and prefer a Blob for uploads.
- Treat capture as asynchronous UI work: disable a duplicate-click button, show progress for large areas and handle rejected Promises.
For server-generated, repeatable screenshots, a browser automation service is usually more appropriate than reconstructing a client DOM with html2canvas.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server. One request captures a URL as PNG, JPEG, WebP or PDF without adding html2canvas to your Angular bundle. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status.
Use the ScreenshotNeo API documentation for all options, including full-page and element capture, device presets, custom viewport and retina scale, dark mode, PDF settings, CSS and JavaScript, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous jobs, webhooks, bulk capture and usage reporting.
Free tools Windows power users keep installed
One-click scans. No signup required.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients. Every feature is included on every plan: 1,000 screenshots per month are free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
Frequently Asked Questions
Can I use both package names in one Angular 7 application?
Avoid doing so unless separate, deliberately isolated code requires it. Pick one package form so dependency resolution and imports remain unambiguous.
Does html2canvas capture a whole webpage exactly like Chrome’s screenshot tool?
No. It rebuilds pixels from DOM and CSS, so browser rendering and unsupported styles can cause visual differences.
Can Angular Universal generate the image on the server with html2canvas?
No. html2canvas requires browser APIs; use a browser-capable screenshot service for server-side jobs.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
