vue使用html2canvas


有时候我们会用到将网页上的东西转换为图片的需求,有一种插件就可以帮助我们来完成,现在我来介绍这个插件如何使用

1.安装html2canvas

npm install --save html2canvas

2.导入

import html2canvas from "html2canvas";

3.html

    
我是截取的内容

4.转成图片的方法

  toImage() {
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
      }).then((canvas) => {
        let url = canvas.toDataURL("image/png");
        this.htmlUrl = url; 
        if (this.htmlUrl) {
          this.isShow = true;
        }
      });

5.完整代码(仅供参考)




6.效果展示

7.参考

感谢https://www.cnblogs.com/shirliey/p/10647239.html博主给的思路

vue