项目实训（三）：输入法开发（2）

最新推荐文章于 2024-03-04 18:17:53 发布

kakeooo

最新推荐文章于 2024-03-04 18:17:53 发布

阅读量640

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/kakeooo/article/details/124569678

版权

本次开发主要实现前端截图上传，替换使用不太方便的图片上传文字上传

由于是从画板中截图，htmltopng之类的dom读取截图库就不可以使用

一开始考虑使用chrome extension实现截图，但实现起来效果不太理想（向js逻辑传递截图数据比较啰嗦，需要通过storage），且extension发布不方便还有浏览器限制与版本限制，考虑其他实现

后来经过调研发现getDisplayMedia可以获取屏幕视频流，可以把视频流打入video从中截取一屏内容读入canvas中实现截图

但这样截取的是整屏幕的内容，还需要做一个截屏中常用的拖拽截屏框，根据用户拖拽坐标计算出位置截取对应的图片即可

  getDisplayMedia(options) {
      // fill 不同版本的浏览器
      if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
        return navigator.mediaDevices.getDisplayMedia(options);
      }
      if (navigator.getDisplayMedia) {
        return navigator.getDisplayMedia(options);
      }
      if (navigator.webkitGetDisplayMedia) {
        return navigator.webkitGetDisplayMedia(options);
      }
      if (navigator.mozGetDisplayMedia) {
        return navigator.mozGetDisplayMedia(options);
      }
      throw new Error(