vue 调色器和js-web-screen-shot截图插件

最近在做 Cesium 需要的功能模块，然后写了个demo,发现demo里的模块功能泛用性很高所以写个文章记录一下先。PS:很少有人提到，这个调用了网络摄像头拍照如果在localhost下没有问题的，但是如果你是布置到内网那么是不行的。这是因为webrtc需要使用https支持。最典型的错误为

Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')

除此以外如果你使用该组件截图时发生了空白的情况，那么原因有下

1.图片跨越或WebGL（我无解）也许截图之前先渲染一下场景和相机就不会空白

2.好像作者在编写时没有考虑过http图片的处理（enableWebRtc改为true）

3.地图属性不允许（new Cesium.Viewer属性加上）

contextOptions: {
        webgl: {
          alpha: true,
          depth: true,
          stencil: true,
          antialias: true,
          premultipliedAlpha: true,
          //通过canvas.toDataURL()实现截图需要将该项设置为true
          preserveDrawingBuffer: true,
          failIfMajorPerformanceCaveat: true,
        },
        allowTextureFilterAnisotropic: true,
      },

# 准备工作

## 截图

yarn add js-web-screen-shot
# or
npm install js-web-screen-shot --save

//然后在代码里引入
import ScreenShort from "js-web-screen-shot";

//npm官网地址
https://www.npmjs.com/package/js-web-screen-shot

## 调色器

//引入elementUI 具体官网 太长且大部分人应该都不用就不说了
https://element.eleme.cn/#/zh-CN/component/quickstart

//具体位置
https://element.eleme.cn/#/zh-CN/component/color-picker

# 代码块