前端利用html2Canvas实现截图

html2canvas.js原理是将html转化为Canvas，进而保存图片。附上html2canvas官网地址 http://html2canvas.hertzen.com

下面是一些常用的配置

Name	Default	Description
allowTaint	false	是否允许跨域
backgroundColor	#ffffff	画布背景色（如果未在DOM中指定）。设置null为透明
canvas	null	现有canvas元素用作绘图的基础
imageTimeout	15000	加载图像的超时时间（以毫秒为单位）。设置0为禁用超时
proxy	null	代理将用于加载跨域图像的网址。如果留空，则不会加载跨域图像。
scale	window.devicePixelRatio	用于渲染的比例尺。默认为浏览器设备像素比率
useCORS	false	是否尝试使用CORS从服务器加载图像
width	Element width
height	Element height
x	Element x-offset	裁剪画布X坐标
y	Element y-offset	裁剪画布Y坐标

例子：

  //截图
    takeScreenshot() {
      let _self = this;
      return html2canvas(_self.$refs.echartsView, {
        // width: 1920,
        // height: 1920,
        backgroundColor: null,
        useCORS: true, // 解决文件跨域问题
      }).then((canvas) => {
        _self.url = canvas.toDataURL("image/png"); // 生成的图片

        return new Promise((resolve, reject) => {
          resolve(_self.url);
        });

        // 可以上传后端或者直接显示
        // this.imgUrl = url
      });
    },