视频录像拍照加水印 在线文档编辑

主题：最近又学到的知识吧，虽然以前也有做过这次记录一下

一 .场景1：视频录像拍照加水印 

知识点：

1.用标签<video>, navigator.mediaDevices.getUserMedia获取设备，给不同浏览器做兼容；

2.图片添加水印是原来有 <canvas> 获取canvas然后画图drawImage给图片画水印加文字

3.关于h5页面进入验证前面要校验有没有参数传入，如果没有请扫描进入

重要代码逻辑：

 _this.thisContext.drawImage(_this.thisVideo, 0, 0, this.videoWidth, this.videoHeight)
            _this.thisContext.font = "20px 宋体"
            _this.thisContext.fillStyle = "red"
            // 设置右对齐
            _this.thisContext.textAlign = 'right'
            // 在指定位置绘制文字，这里指定距离右下角20坐标的地方
            _this.thisContext.fillText(_this.$store.state.userInfos.userInfos.username, this.videoWidth - 20, this.videoHeight - 80)

二  .场景2：在线文档编辑 

知识点：

1.在线文档的API采用的是wps,   快速开始-WebOffice 知识库

2.wps  引入，渲染使用，方法是用iframe把wps的整个框起来，遇到问题是iframe  src引入vue文件怎么引入

重要代码逻辑：

1，wps  引入在main.js

import WebOfficeSDK from '@/static/web-office-sdk-v1.1.19-b9fc2be1/web-office-sdk-v1.1.19.es'

Vue.prototype.WebOfficeSDK = WebOfficeSDK

2. vue 中重新打开页面使用

  const jump = this.$router.resolve({

        path: "onlineDetail",

        query: {

          id: data.id

        }

      });

      window.open(jump.href, "_blank");

另一种方法在本页面重新打开一个页面，这个页面用iframe嵌套，lframe里面再嵌套wps写好的vue组件。需要token 和url 用sessionstorage存好:

 let form = {};
            form.jtoken = getToken();
            form.jwpsUrl = res.data;
            sessionStorage.setItem("wps", JSON.stringify(form));
            this.$router.push({
              path: `/onlineDetail`,
              query: {
                fileName: data.fileName
              }
            });

组件模块使用，注意src引入的是本地的vue页面组件：

<template>
  <div>
   <div class="officeTop">
      <div class="officeTop_l">{{ fileName }}</div>
      <div class="officeTop_r" @click="goBack">返回</div>
    </div> 
    <iframe
      class="myIframe"
      id="office-iframe"
      src="../#/office"
      scrolling="no"
      frameborder="0"
    ></iframe>
    <!-- <viewFile :wpsUrl="jwpsUrl" :wpsToken="jtoken" /> -->
  </div>
</template>

office组件：

<div id="viewFile" class="custom-mount"></div>
 props: {
    wpsUrl: {
      type: String,
      value: ""
    },
    wpsToken: {
      type: String,
      value: ""
    }
  },
    openWps(/*url, wpsToken*/) {
      console.log("参数", JSON.parse(sessionStorage.getItem("wps")));
      const instance = this.WebOfficeSDK.config({
        url: JSON.parse(sessionStorage.getItem("wps")).jwpsUrl,
        mode: this.simpleMode ? "simple" : "normal",
        commonOptions: {
          isBrowserViewFullscreen: false, // 隐藏顶部区域(头部和工具栏)
          isIframeViewFullscreen: false // 隐藏头部区域
        }
        // mount: document.querySelector(".custom-mount")
      });
      instance.setToken({
        token: JSON.parse(sessionStorage.getItem("wps")).jtoken
      });
      // 打开文档结果
      console.log("instance", instance);
      console.log(instance.iframe);
      // const iframeDiv = instance.iframe;
      // iframeDiv.style.top = "50px";
      instance.on("fileOpen", data => {
        console.log("fileOpen", data);
        this.fileName = data.fileInfo.name;
      });

      instance.on("error", data => {
        console.log("error", data);
      });
    },