js-web-screen-shot3.2

原插件js-web-screen-shot

#js-web-screen-shot ·

修改内容

增加参数containerStyle，targetId

插件安装

yarn add js-web-screen-shot3.2

# or

npm install js-web-screen-shot3.2 --save

import形式使用插件

• 在需要使用截屏插件的业务代码中导入插件

import ScreenShort from "js-web-screen-shot3.2";

• 在业务代码中使用时实例化插件即可

new ScreenShort();

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

cdn形式使用插件

• 将插件的dist文件夹复制到你的项目中
• 使用script标签引入dist目录下的screenShotPlugin.umd.js文件

<script src="./screenShotPlugin.umd.js"></script>

• 在业务代码中使用时实例化插件即可

    // 截图确认按钮回调函数
    const callback = (base64) =>{
      console.log(base64);
    }
    new screenShotPlugin({enableWebRtc: false, completeCallback: callback, containerStyle: containerStyle, targetId: id});

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

参数说明

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

• enableWebRtc 是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图
• completeCallback 截图完成回调函数，值为Function类型，最右侧的对号图标点击后会将图片的base64地址回传给你定义的函数，如果不传的话则会将图片的base64地址放到sessionStorage中，你可以通过下述方式拿到他：

sessionStorage.getItem("screenShotImg");

*containerStyle 自定义截图范围，值为Object ==> { width:number, height:number } *targetId 自定义截图目标id，值为String ==> 'id'