最近看同事做了一个需求觉得比较有意思,就看了看相关代码,简单学习下。
需求:点击截屏按钮将页面内容以图片形式下载下来形成截屏
不止一种方式实现,我使用了dom-to-img进行演示
dom-to-img文档链接
以下代码使用react函数组件
- 加载dom-to-img
yarn add dom-to-img
or
npm install dom-to-img
- 项目中引用
/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');
- 下载时需要用到FileSaver.js
yarn add file-saver
- 选择要截屏的网页dom并设置一个截屏入口
<div id="my-node" className="my-node">
my-node
<button onClick={operation}>click</button>
</div>
- 操作内容
const operation = () => {
var node = document.getElementById("my-node");
domtoimage.toBlob(node).then(blob=>{
window.saveAs(blob, 'my-node.png')
})
};
- 以上就形成了简易的网页截屏效果
页面效果图
点击截屏效果图
- 整体代码
import domtoimage from "dom-to-image";
import { saveAs } from 'file-saver';
function DomToImg() {
const operation = () => {
var node = document.getElementById("my-node");
domtoimage.toBlob(node).then(blob=>{
window.saveAs(blob, 'my-node.png')
})
};
return (
<div id="my-node" className="my-node">
my-node
<button onClick={operation}>click</button>
</div>
);
}
export default DomToImg;
~~dom-to-img其他使用
- 获取png图片base64编码地址并在页面显示
domtoimage.toPng(node).then(dataUrl => {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
}).catch(error => {
console.error("oops, something went wrong!", error);
});
效果如下
- 形成一个压缩的jpeg格式的图片
domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 }).then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
})