vue项目中如何实现类似微信、QQ截图功能

项目场景：

可视化项目，模仿微信、QQ截屏，并且自动上传图片功能

---

问题描述

1、利用vue-web-screen-shot插件实现截屏功能
2、当截取有百度地图的区域时，地图上的覆盖物可以获取到，底图却消失不见了

原因分析：

vue-web-screen-shot 插件底层运用的技术是html2canvas
百度地图底图无法获取应该是html2canvas 对webgl不兼容

---

解决方案：

百度地图初始化以后，加入如下代码：

// 解决html2canvas截图空白问题
  HTMLCanvasElement.prototype.getContext = function (origFn) {
    return function (type, attributes) {
      if (type === 'webgl') {
        attributes = Object.assign({}, attributes, {
          preserveDrawingBuffer: true,
        });
      }
      return origFn.call(this, type, attributes);
    };
  }(HTMLCanvasElement.prototype.getContext);