npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gitee/screen-shot

v0.1.5

Published

web端自定义截屏插件(原生JS版)

Downloads

19

Readme

js-web-screen-shot · npm yarn github

web端自定义截屏插件(原生JS版),运行视频:实现web端自定义截屏功能 ,效果图如下:截屏效果图

写在前面

关于此插件的更多介绍以及实现原理请移步:

插件安装

yarn add js-web-screen-shot

# or

npm install js-web-screen-shot --save

插件使用

由于插件采用原生js编写且不依赖任何第三方库,因此它可以在任意一台支持js的设备上运行。

import形式使用插件

  • 在需要使用截屏插件的业务代码中导入插件
import ScreenShort from "js-web-screen-shot";
  • 在业务代码中使用时实例化插件即可
new ScreenShort();

⚠️注意:实例化插件时一定要等dom加载完成,否则插件无法正常工作。

cdn形式使用插件

  • 将插件的dist文件夹复制到你的项目中
  • 使用script标签引入dist目录下的screenShotPlugin.umd.js文件
<script src="./screenShotPlugin.umd.js"></script>
  • 在业务代码中使用时实例化插件即可
    // 截图确认按钮回调函数
    const callback = (base64) =>{
      console.log(base64);
    }
    // 截图取消时的回调函数
    const closeFn = ()=>{
      console.log("截图窗口关闭");
    }
    new screenShotPlugin({enableWebRtc: true, completeCallback: callback,closeCallback: closeFn});

⚠️注意:实例化插件时一定要等dom加载完成,否则插件无法正常工作。

参数说明

截图插件有一个可选参数,它接受一个对象,对象每个key的作用如下:

  • enableWebRtc 是否启用webrtc,值为boolean类型,值为false则使用html2canvas来截图
  • completeCallback 截图完成回调函数,值为Function类型,最右侧的对号图标点击后会将图片的base64地址回传给你定义的函数,如果不传的话则会将图片的base64地址放到sessionStorage中,你可以通过下述方式拿到他:
sessionStorage.getItem("screenShotImg");
  • closeCallback 截图关闭回调函数,值为Function类型。
  • triggerCallback 截图响应回调函数,值为Function类型,使用html2canvas截屏时,页面图片过多时响应会较慢,该函数为响应完成后触发的事件。回调函数返回一个对象,类型为: {code: number,msg: string},code为0时代表截图加载完成。
  • cancelCallback 取消分享回到函数,值为Function类型,使用webrtc模式截屏时,用户点了取消或者浏览器不支持时所触发的事件。回调函数返回一个对象,类型为:{code: number,msg: string},code为-1时代表用户未授权或者浏览器不支持webrtc。
  • level 截图容器层级,值为number类型。
  • canvasWidth 画布宽度,值为number类型。
  • canvasHeight 画布高度,值为number类型。
  • position 截图容器位置,值为{left?: number, top?: number}类型
  • clickCutFullScreen 单击截全屏启用状态,值为boolean类型, 默认为false

API文档

插件暴露了一些内部变量出来,便于调用者根据自己的需求进行修改。

getCanvasController

该函数用于获取截图容器的DOM,返回值为HTMLCanvasElement类型。

示例代码:

import ScreenShort from "js-web-screen-shot";

const screenShotHandler = new ScreenShort();
const canvasDom = screenShotHandler.getCanvasController();

注意:如果截图容器尚未加载完毕,获取到的内容可能为null。

工具栏图标定制

如果你需要修改截图工具栏的图标,可以通过覆盖元素css类名的方式实现,插件内所有图标的css类名如下所示

注意:下述所有列举的图标还包含点击后的图标样式,它的写法为.xxx-active {},例如:.square-active {}

square 矩形绘制图标

  .square {
    background-image: url("你的图标路径") !important;
    
    &:hover {
      background-image: url("你的图标路径") !important;
    }
    
    &:active {
      background-image: url("你的图标路径") !important;
    }
 }

round 圆型绘制图标

  .round {
    background-image: url("你的图标路径") !important;
    

    &:hover {
      background-image: url("你的图标路径") !important;
    }

    &:active {
      background-image: url("你的图标路径") !important;
    }
  }

right-top 箭头绘制图标

  .right-top {
    background-image: url("你的图标路径") !important;
    

    &:hover {
      background-image: url("你的图标路径") !important;
    }

    &:active {
      background-image: url("你的图标路径") !important;
    }
  }

brush 画笔工具

  .brush {
    background-image: url("你的图标路径") !important;

    &:hover {
      background-image: url("你的图标路径") !important;
    }

    &:active {
      background-image: url("你的图标路径") !important;
    }
  }
  
  // 画笔尺寸选择
  // 分为3种尺寸:small、medium、big
  // 此处只列举small尺寸的写法,其它两种只需要替换brush-xxx即可
  .brush-small {
    
    background-image: url("你的图标路径") !important;

    &:hover {
      background-image: url("你的图标路径") !important;
    }
    &:active {
      background-image: url("你的图标路径") !important;
    }
  }

mosaicPen 马赛克工具

  .mosaicPen {
    background-image: url("你的图标路径") !important;
    

    &:hover {
      background-image: url("你的图标路径") !important;
    }

    &:active {
      background-image: url("你的图标路径") !important;
    }
  }

text 文本工具

  .text {
    background-image: url("你的图标路径") !important;
    

    &:hover {
      background-image: url("你的图标路径") !important;
    }

    &:active {
      background-image: url("你的图标路径") !important;
    }
  }

save 保存

  .save {
    background-image: url("你的图标路径") !important;
    

    &:hover {
      background-image: url("你的图标路径") !important;
    }

    &:active {
      background-image: url("你的图标路径") !important;
    }
  }

close 关闭

  .close {
    background-image: url("你的图标路径") !important;
    

    &:hover {
      background-image: url("你的图标路径") !important;
    }
  }

undo 撤销

  .undo {
    
    background-image: url("你的图标路径") !important;
  
    &:hover{
      background-image: url("你的图标路径") !important;
    }
  }
  // 禁用状态图标
  .undo-disabled {
    
    background-image: url("你的图标路径") !important;
  }

confirm 确认

  .confirm {
    background-image: url("你的图标路径") !important;
    

    &:hover {
      background-image: url("你的图标路径") !important;
    }
  }

写在最后

至此,插件的所有使用方法就介绍完了,该插件的Vue3版本,请移步:vue-web-screen-shot