rk-encript
v1.0.0
Published
Capture photo Util
Downloads
4
Readme
Capture photo Util
Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<div id="app">
<div>
<h2>直接抓拍</h2>
<button id="capture">抓拍</button>
</div>
<div>
<h2>video预览</h2>
<button id="preview">预览</button>
<button id="stop">停止</button>
</div>
<div>
<video id="video"></video>
</div>
<div>
<img id="img" />
</div>
</div>
</body>
</html>
typescript
import { CapturePic } from 'capture-pic';
export interface Options {
videoId: string;
width: number;
height: number;
}
let capUtil: CapturePic;
const button = document.getElementById('capture');
if(button){
button.onclick = async (): Promise<void> =>{
if(!capUtil){
capUtil = await new CapturePic().init();
}
if(!capUtil.isSuportTest()){
console.error('不支持抓拍功能');
capUtil = null
return
}
const img: HTMLImageElement = document.getElementById('img') as HTMLImageElement;
img.src = capUtil.capture().getBase64();
capUtil.stop();
capUtil = null;
}
}
const preview = document.getElementById('preview');
if(preview){
preview.onclick = async (): Promise<void> =>{
if(!capUtil){
capUtil = await new CapturePic({
videoId:'video'
} as Options).init();
}
if(!capUtil.isSuportTest()){
console.error('不支持抓拍功能');
capUtil = null
return
}
const img: HTMLImageElement = document.getElementById('img') as HTMLImageElement;
img.src = capUtil.capture().getBase64();
}
}
const stop = document.getElementById('stop');
if(stop){
stop.onclick = (): void =>{
if(!capUtil){
return;
}
capUtil.stop();
capUtil = null;
}
}