https://github.com/korbinzhao/dom2pic
transfer a html dom to canvas/png/jpeg/svg element/multiple pictures
https://github.com/korbinzhao/dom2pic
Last synced: 25 days ago
JSON representation
transfer a html dom to canvas/png/jpeg/svg element/multiple pictures
- Host: GitHub
- URL: https://github.com/korbinzhao/dom2pic
- Owner: korbinzhao
- Created: 2020-04-23T06:46:12.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T15:26:35.000Z (9 months ago)
- Last Synced: 2024-11-06T10:07:12.062Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 72.3 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dom2pic
transfer a html dom to canvas/png/jpeg/svg element/multiple pictures
# usage
```
const Dom2pic = require('dom2pic');
const dom2pic = new Dom2pic({
root: document.querySelector('.content2screenshot'),
backgroundColor: '#e2e2e2'
});
dom2pic.toPng()
.then(base64 => {
console.log('--- png base64 ---', base64);
});
dom2pic.toJpeg()
.then(base64 => {
console.log('--- jpeg base64 ---', base64);
});
dom2pic.toSvg().then(svg => {
document.body.appendChild(svg);
});
dom2pic.toCanvas()
.then(canvas => {
console.log('--- canvas ---', canvas);
});
dom2pic.toMultiPictures('.item').then(results => {
console.log('--- results ---', results);
results.forEach(obj => {
const img = document.createElement('img');
img.src = obj.uri;
img.style.width = '500px';
document.body.append(img);
})
})
```
# API
* new Dom2pic(config)
* new a Dom2pic instance
* options
* root
HTMLElement | string; // root html dom to screenshot, cannot be absolute position
* backgroundColor
string; // optional, set root dom backgroundColor
* toCanvas
* generate a canvas from a dom element
* toPng
* generate a png base64 string from a dom element
* toJpeg
* generate a jpeg base64 string from a dom element
* toSvg
* generate a svg from a dom element
* toMultiPictures
* generate multiple pictures according to child dom className
* options
* childNodeSelector
string; generate multiple pictures by childNodeSelector
* type
png | jpeg
# demo && development
```
npm install
npm start
```