How to use html2canvas - 10 common examples

To help you get started, we’ve selected a few html2canvas examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ikismail / Angular-ShoppingCart / src / app / layouts / product / checkout / result / result.component.ts View on Github external
downloadReceipt() {
		const data = document.getElementById('receipt');
		// console.log(data);

		html2canvas(data).then((canvas) => {
			// Few necessary setting options
			const imgWidth = 208;
			const pageHeight = 295;
			const imgHeight = canvas.height * imgWidth / canvas.width;
			const heightLeft = imgHeight;

			const contentDataURL = canvas.toDataURL('image/png');
			const pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
			const position = 0;
			pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
			pdf.save('ikismail.pdf'); // Generated PDF
		});
	}
}
github microsoft / SiteInspector / src / Tabs / CaptureTab / views / component.jsx View on Github external
captureClick = () => {
    this.props.captureScreenshot(null);
    this.setState({
      isLoading: true,
    });
    html2canvas(document.body, {
      logging: false,
      useCORS: true,
      imageTimeout: 5000,
      onclone: (cloneDoc) => {
        const si = cloneDoc.getElementById(config.siteInspectorElement);
        // hard coded width to prevent overrendering
        cloneDoc.body.style.width = `${document.body.scrollWidth}px`;
        if (si) {
          si.parentElement.removeChild(si);
        }

        const style = cloneDoc.createElement('style');
        style.innerHTML = '* { animation-name: unset !important; -webkit-animation-duration: 0s !important; ' +
          'animation-duration: 0s !important; -webkit-animation-fill-mode: none !important; animation-fill-mode: none !important; ' +
          '-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; }';
        cloneDoc.body.appendChild(style);
github Sunbird-Ed / SunbirdEd-portal / src / app / client / src / app / modules / offline / components / offline-help-center / offline-help-center.component.ts View on Github external
private generatePdfFromData(data: HTMLElement) {
    html2canvas(data).then(canvas => {
      const imgWidth = 208;
      const pageHeight = 350;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;
      const contentDataURL = canvas.toDataURL('image/png');
      const pdf = new jspdf('p', 'mm', 'a4');
      let position = 8;
      // let margin = 16;
      pdf.addImage(
        contentDataURL,
        'PNG',
        8,
        position,
        imgWidth - 24,
        imgHeight - 24
      );
github the-rango / AntAlmanac / src / components / AlmanacGraph / DomPic.js View on Github external
onClick={() => {
          html2canvas(document.getElementById("ScreenShot")).then(function(
            canvas
          ) {
            let img = canvas.toDataURL("image/png");
            let lnk = document.createElement("a"),
              e;
            /// the key here is to set the download attribute of the a tag
            lnk.download = "Schedule.png";
            /// convert canvas content to data-uri for link. When download
            /// attribute is set the content pointed to by link will be
            /// pushed as "download" in HTML5 capable browsers
            lnk.href = img;
            /// create a "fake" click-event to trigger the download
            if (document.createEvent) {
              e = document.createEvent("MouseEvents");
              e.initMouseEvent(
                "click",
github sakitam-fdd / ol-plot / src / Geometry / Text / TextArea.js View on Github external
getImage (data) {
    try {
      let image_ = html2canvas(data).then(canvas => {
        let _image = new Image()
        _image.src = canvas.toDataURL('image/png')
        return new Promise((resolve) => {
          resolve(_image)
        })
      }).catch(error => {
        console.info(error)
      })
      return image_
    } catch (error) {
      console.log(error)
    }
  }
github neo4j-apps / neuler / src / components / AlgoResults.js View on Github external
const printElement = element => {
  html2canvas(element).then(function (canvas) {
    const guid = generateId()
    ReImg.fromCanvas(canvas).downloadPng(`neuler-${guid}.png`);
  })
}
github niklasvh / html2canvas / www / src / components / example.js View on Github external
onClick={() => {
                                    html2canvas(document.body, {
                                        allowTaint: true,
                                        width: window.innerWidth,
                                        height: window.innerHeight,
                                        scrollX: window.pageXOffset,
                                        scrollY: window.pageYOffset,
                                        x: window.pageXOffset,
                                        y: window.pageYOffset
                                    })
                                        .then(canvas => {
                                            this.setState({canvas});

                                            canvas.style.position = 'fixed';
                                            canvas.style.top = '0';
                                            canvas.style.left = '0';
                                            canvas.style.opacity = '0';
                                            canvas.style.transform = 'scale(0)';
github patoles / prysm / static / src / js / shapeshift.js View on Github external
var action = (item) => {
			var positionStyle = getComputedStyle(item)["position"];
			if (positionStyle === "static" || positionStyle === "")
				item.style.position = "relative";
			html2canvas(item, {
				useCORS:true,
				onrendered: (canvas) => {
					item.style.border = 'none';
					var shader = new ShaderHandler(item, canvas.toDataURL('png'), options.fragment || 'default', options.vertex || 'default', options.params);
					this.fragment = shader.fragment;
					this.vertex = shader.vertex;
					this.canvasInfo = shader.canvasInfo;
				}
			});
		}
        if (typeof(target) === "string")
github wso2 / carbon-dashboards / components / dashboards-web-component / src / utils / DashboardReportGenerator.jsx View on Github external
}

            pdf.setFontType('bold');
            pdf.setFontSize(12);
            pdf.text(pdfInfo, pdfConfig.stampImageLandscape.coordinates.x, 18);
            pdf.setFontType('normal');

            await this.addPdfImage(`/${appContext}/apis/dashboards/pdfFooter`, function (res) {
                if (res != 'none') {
                    pdf.addImage(res, 'JPEG', (pdf.internal.pageSize.getWidth() - 40),
                        (pdf.internal.pageSize.getHeight() - 8), pdfConfig.stampImageLandscape.size.x,
                        pdfConfig.stampImageLandscape.size.y);
                }
            });

            await html2canvas(element).then((canvas) => {
                const imgData = canvas.toDataURL('image/png');
                if (canvas.width > canvas.height - 28) {
                    const val = (pdf.internal.pageSize.getWidth()) / canvas.width;
                    const xposition = (pdf.internal.pageSize.getWidth() - canvas.width * val) / 2;

                    if (canvas.height * val < 210) {
                        if (canvas.height * val < 180) {
                            pdf.addImage(imgData, 'JPEG', xposition, 45, canvas.width * val, canvas.height * val,
                                'widget', 'FAST');
                        } else {
                            pdf.addImage(imgData, 'JPEG', xposition, 25, canvas.width * val, canvas.height * val,
                                'widget', 'FAST');
                        }
                    } else {
                        const valH = (pdf.internal.pageSize.getHeight() - 28) / canvas.height;
                        const xposition = (pdf.internal.pageSize.getWidth() - canvas.width * valH) / 2;
github Molunerfinn / node-github-profile-summary / src / App.vue View on Github external
saveImage () {
      html2Canvas(document.querySelector('.profile'), {
        backgroundColor: '#f6f8fa',
        useCORS: true,
        scale: 2
      })
        .then(canvas => {
          const a = document.createElement('a')
          a.href = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream')
          a.download = `${this.$route.params.username}-Profile.jpg`
          a.click()
        })
    }
  }

html2canvas

Screenshots with JavaScript

MIT
Latest version published 3 years ago

Package Health Score

70 / 100
Full package analysis

Popular html2canvas functions