纯js实现浏览器屏幕录制转成if动画，无需第三方插件，支持chrome、火狐等现代浏览器
以前我们需要截屏，必须安装一个软件，需要截屏转成gif动画，又需要下载软件安装后操作，现在我们直接通过js代码在浏览器上实现屏幕录制成gif动画
原理就是利用webrtc和html2canvas插件来进行html元素的录制，然后通过shotgif进行视频转gif就OK了
示例如下，可直接运行和编辑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=RecordRTC|gifshot&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
use(["html2canvas.min"], function() {
var elementToRecord = document.getElementById('element-to-record');
var canvas2d = document.getElementById('background-canvas');
var context = canvas2d.getContext('2d');
canvas2d.width = elementToRecord.clientWidth;
canvas2d.height = elementToRecord.clientHeight;
var isRecordingStarted = false;
var isStoppedRecording = false;
(function looper() {
if (!isRecordingStarted) {
return setTimeout(looper, 500);
}
html2canvas(elementToRecord).then(function(canvas) {
context.clearRect(0, 0, canvas2d.width, canvas2d.height);
context.drawImage(canvas, 0, 0, canvas2d.width, canvas2d.height);
if (isStoppedRecording) {
return;
}
requestAnimationFrame(looper);
});
})();
var recorder = new RecordRTC(canvas2d, {...点击查看剩余70%
{{collectdata}}
网友评论0