纯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, {
type: 'canvas'
});
document.getElementById('btn-start-recording').onclick = function() {
this.disabled = true;
isStoppedRecording = false;
isRecordingStarted = true;
recorder.startRecording();
document.getElementById('btn-stop-recording').disabled = false;
};
document.getElementById('btn-stop-recording').onclick = function() {
this.disabled = true;
recorder.stopRecording(function() {
isRecordingStarted = false;
isStoppedRecording = true;
var blob = recorder.getBlob();
gifshot.createGIF({
'video': blob
}, function(obj) {
if (!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
document.body.appendChild(animatedImage);
}
});
// document.getElementById('preview-video').srcObject = null;
document.getElementById('preview-video').src = URL.createObjectURL(blob);
document.getElementById('preview-video').parentNode.style.display = 'block';
elementToRecord.style.display = 'none';
// window.open(URL.createObjectURL(blob));
});
};
});
});
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
<style>
html, body {
margin: 0!important;
padding: 0!important;
}
video {
width: auto;
max-width: 100%;
}
</style>
</head>
<body>
<h1>用RecordRTC录制html元素并生成gif</h1>
<p>
点击录制，然后滚动一下下面的div，5秒后点击结束录制
</p>
<button id="btn-start-recording">开始录制</button>
<button id="btn-stop-recording" disabled>结束录制</button>
<hr>
<div style="display: none;">
<video controls autoplay playsinline id="preview-video"></video>
</div>
<div id="element-to-record" style="border: 5px solid gray; border-radius: 5px; padding: 20px; margin: 20px;height:100px;overflow:scroll;">
<img src="http://editor.bfw.wiki/bfwrepo/image/demoimg.jpg" />
</div>
<canvas id="background-canvas" style="position:absolute; top:-99999999px; left:-9999999999px;"></canvas>
</body>
</html>
{{collectdata}}
网友评论0