dom-to-img 学习记录(网页截屏)

最近看同事做了一个需求觉得比较有意思，就看了看相关代码，简单学习下。

需求：点击截屏按钮将页面内容以图片形式下载下来形成截屏
不止一种方式实现，我使用了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();
})