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

# 代码块

<template>
  <div class="container">
    <!-- //<input type="color" v-model="color" @change="colorVariation" /> -->
    <!-- 调色器 -->
    <el-color-picker
      v-model="color"
      size="mini"
      :show-alpha="true"
      @change="colorVariation"
    ></el-color-picker>
    <!-- 截图按钮 -->
    <button class="Cut" @click="printscreen"></button>
    <canvas id="loadingbar"></canvas>
  </div>
</template>

<script>
//import JSColor from '../../static/unti/Device/jscolor'
import ScreenShort from 'js-web-screen-shot'
export default {
  data() {
    return {
      color: null,
      uploadlist: [],
    }
  },
  mounted() {},
  methods: {
    //截图
    //开始截图
    printscreen() {
      // eslint-disable-next-line no-unused-vars
      var timer = setTimeout(() => {
        // eslint-disable-next-line no-unused-vars
        const screenShotHandler = new ScreenShort(
          {
            enableWebRtc: false, //是否显示选项框
            level: 99, //层级级别
            completeCallback: this.callback,
            closeCallback: this.closeFn,
          },
          0
        )
      })
    },
    /**
     * 根据图片生成画布
     */
    convertImageToCanvas(image) {
      var canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      canvas.getContext('2d').drawImage(image, 0, 0)
      return canvas
    },
    /**
     * 生成图片
     * 截图确认按钮回调函数
     */
    callback(base64data) {
      let _this = this
      var image = new Image()
      image.src = base64data
      image.onload = () => {
        var canvas = _this.convertImageToCanvas(image)
        var url = canvas.toDataURL('image/jpeg')
        // 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加
        _this.downloadFile(url)
        _this.uploadlist.push({ image: url })
        for (var i = 0; i < _this.uploadlist.length; i++) {
          if (_this.uploadlist.length >= 6) {
            _this.uploadhide = false
          }
        }
        console.log(_this.uploadlist, 'push')

        this.$message({
          type: 'success',
          message: '截图成功',
        })
      }
    },
    //下载截图
    downloadFile(capture) {
      const saveInfo = {
        //导出文件格式自己定义，我这里用的是时间作为文件名
        download: '截图' + new Date() + `.png`,
        href: capture,
      }
      const element = document.createElement('a')
      element.style.display = 'none'
      for (const key in saveInfo) {
        element.setAttribute(key, saveInfo[key])
      }
      document.body.appendChild(element)
      element.click()
      setTimeout(() => {
        document.body.removeChild(element)
      }, 300)
    },
    ///调色器
    colorVariation() {
      // eslint-disable-next-line no-unused-vars
      let _this = this
      if (this.color.search('rgba') != -1) {
        console.log(_this.hexify(_this.color))
      } else {
        console.log(this.color)
      }
    },
    //rgb格式转16进制
    hexify(color) {
      var values = color
        .replace(/rgba?\(/, '')
        .replace(/\)/, '')
        .replace(/[\s+]/g, '')
        .split(',')
      var a = parseFloat(values[3] || 1),
        r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
        g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
        b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
      return (
        '#' +
        ('0' + r.toString(16)).slice(-2) +
        ('0' + g.toString(16)).slice(-2) +
        ('0' + b.toString(16)).slice(-2)
      )
    },
  },
}
</script>
<style scoped>
.Cut {
  width: 20px;
  height: 20px;
  /* 按钮底图 */
  background: rgb(255, 255, 255) url('../../static/image/CutTheScreenshot.png')
    round;
  cursor: pointer;
}
.container {
  height: 100%;
  width: 100%;
  display: flex;
}
</style>