作者： admin

https://github.com/kingToolbox/WindTerm/releases

视频编码就是不影响视频的清晰度情况下进行压缩。

常用编码：H.264/AVC、H.265/HEVC

目前最新：H.266/VVC，有版权需要收费

 

为什么需要视频编码？

我们都知道视频是由大量连续播放的图片构成的，原理大概就像最早的手翻书，用多长连续动作的图画，利用人的视觉残留让画面动起来。

假设我们播放1080P 60帧的视频，那么1秒就包含了60张类似的图片，假设原始图片大小为5M，那么1秒就有300M（5Mx60），1分钟视频就相当于18G（300Mx60）。对于如此大的视频内容，不论是手机还是电脑都吃不消，所以就需要视频编码。

 

视频编码方式就是指通过压缩技术H.264/AVC、H.265/HEVC、H.266/VVC

https://news.znds.com/article/62802.html

常用编码器工具：https://ffmpeg.org/download.html

1，在docker安装webdav

根据自己的硬件选择

64位硬件：ugeek/webdav:amd64
32位硬件：ugeek/webdav:i386

 

2，安装路径

 

3，端口

 

4，设置账号名

 

5，设置密码

 

6，windows 默认的 WebClient 服务仅支持 https 协议

只给https连接所以需要修改下

//修改注册表
计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters

双击右侧界面中的BasicAuthLevel，双击值改成2

 

重启一下webclient服务

 

现在就可以添加服务了

 

参考文章：

https://blog.yelvlab.cn/archives/621/

http://www.360doc.com/content/24/0113/08/54731571_1110898701.shtml

安装html2canvas、print-js

<div ref="canvas" class="a4-container">
   .
   .
   .
   //需要打印的内容
</div>

import html2canvas from 'html2canvas'
import printJS from 'print-js'


 methods: {

     html2Canvas(printContent, callback){
      // 获取dom 宽度 高度
      const width = printContent.clientWidth;
      const height = printContent.clientHeight;

      // 创建一个canvas节点
      const canvas = document.createElement("canvas");

      const scale = 1; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
      canvas.width = width * scale; // 定义canvas 宽度 * 缩放
      canvas.height = height * scale; // 定义canvas高度 *缩放
      canvas.style.width = width * scale + "px";
      canvas.style.height = height * scale + "px";
      canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale

      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
      const scrollLeft =
        document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度

      html2canvas(printContent, {
        canvas,
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight,
        scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
        scrollY: -scrollTop,
        background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
      })
        .then(canvas => {
          const url = canvas.toDataURL("image/png");
          //console.log("canvas url :" + url);
          callback({ url: url });
        })
        .catch(err => {
          console.error(err);
        });
    },


    printImg(url, callback){
      printJS({
        printable: url,
        type: "image",
        documentTitle: "", // 标题
        style: "@page{size:auto;margin: 1cm ;}", // 去除页眉页脚
        onStart: () => {
          console.log("打印开始");
        },
        onEnd: () => {
          console.log("打印完成");
        }
      });
    },


    saveAsImages() {
      this.html2Canvas(this.$refs.canvas, res => {
        this.printDomUrl = res.url;
        this.printImg(res.url, printRes => {});
      });
    }
    

 }

如果预览打印的内容不全，可以配合修改样式修复

 

 

可能出自某种原因我们需要获取到哪个js哪个位置调用了指定的接口。

1，获取到接口

 

我们需要复制红色区域的关键字。

 

2，按F12点击“sources”

 

3，在重新正常触发一下v2transapi的接口，这时候断点就会自动定位到结束位置，例如：

 

4，点击红色区域也就是去查找上一步，直到找到调用的js接口为止