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.
ikismail / Angular-ShoppingCart / src / app / layouts / product / checkout / result / result.component.ts View on Github 
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
});
}
}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);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
);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",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)
}
}const printElement = element => {
html2canvas(element).then(function (canvas) {
const guid = generateId()
ReImg.fromCanvas(canvas).downloadPng(`neuler-${guid}.png`);
})
}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)';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")}
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;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()
})
}
}
