本发明涉及WEB开发与应用技术领域,特别涉及一种网页版的调用html5视频录制动画GIF图像的方法。
背景技术:
GIF 格式指的是图像交换格式(Graphics Interchange Format,GIF),该格式最初是 CompuServe 为其在线服务用户传输图像而开发的GIF 格式有很多特性,因此在 HTML/XHTML 中十分普及,此外,GIF 图像还非常容易实现动画效果。
但是,目前面临的主要问题有:现有的很多动画gif图像都时通过一些软件、工具制作、视频剪切而成的,这样需要耗费一定的时间和制作知识才能完成gif图像制作。基于以上原因,需要一种网页版的调用html5视频录制动画GIF图像,实现快捷、高效、低成本的制作动画gif图像的方法。
技术实现要素:
本发明解决的技术问题在于提供一种网页版的调用html5视频录制动画GIF图像的方法,解决了传统的在录制动画gif图片需要安装软件、工具等实现gif图片与保存的功能,为生成动画gif图片提供了一种方便、快捷、低成本的录制方法。
本发明解决上述技术问题的技术方案是:
所述的方法包含以下几个步骤:
步骤一、定义视频录制动画gif图像需要的标签;
步骤二、引用RecordRTC.js、jquery.js;
步骤三、 点击开始按钮时调用摄像头进行录制动画gif图像;
步骤四、点击停止按钮时停止录制动画gif图像并将图片地址发送到服务器;
步骤五、服务器将gif图像保存并返回提示信息。
本发明的有益效果:提供了一种网页版的调用html5视频录制动画GIF图像的方法,这种方法解决了传统的在录制动画gif图片需要安装软件、工具等实现gif图片与保存的功能问题,为生成动画gif图片提供了一种方便、快捷、低成本的录制方法。
附图说明
下面结合附图对本发明进一步说明:
图1为本发明的方法流程图。
具体实施方式
如图1所示,本发明采用如下步骤可以实现一种网页版的调用html5视频录制动画GIF图像的方法。
步骤一、需要在录制动画gif图像的页面定义开始按钮标签(button#startBtn),停止按钮标签(button#stopBtn),和存储图片信息的图片标签(img);
<button id="startBtn">开始录制</button>
<button id="stopBtn" >停止录制</button>
<hr>
<img src="" alt="" />。
步骤二、需要引用RecordRTC.js、jquery.js,recordRTC.js会协助我们将视频信息转换为gif图像信息,而jquery.js则帮助我们快速的操作元素;
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="jquery.js"></script>。
步骤三、 点击开始按钮时利用navigator.mediaDevices.getUserMedia()方法调用电脑摄像头,当无法调用摄像头时,及时提示用户调用摄像头失败,当调用摄像头成功时则调用RecordRTC.js的录制动画gif图像的startRecording方法进行录制gif图像;
$("#start").on("click", function(){
navigator.mediaDevices.getUserMedia({ video: true }).then(function(camera) {
recorder = RecordRTC(camera, {
type: 'gif',
frameRate: 1,
quality: 10,
width: 360,
hidden: 240,
onGifPreview: function(gifURL) {
image.src = gifURL;
}
});
recorder.startRecording();
recorder.camera = camera;
}).catch(function(error) {
alert('无法不抓您的相机');
});
})。
步骤四、点击停止按钮时停止录制动画gif图像、将摄像头关闭,并将录制好的gif图片地址发送到服务器;
$("#stop").on("click", function(){
recorder.stopRecording(function(){
image.src = URL.createObjectURL(recorder.getBlob());
recorder.camera.stop();
recorder.destroy();
recorder = null;
});
uploadGif();
})
function uploadGif(){
var src = $("img").attr("src");
$.ajax({
url:"demo.php",
data: {"gifUrl":src},
dataType:"json",
type:"post",
success:function(res){
if(res.status == 200){
alert("保存成功");
}else{
alert("保存失败");
}
}
});
}。
步骤五、服务器获取提交过来的动画gif图像地址并储存到本地中,储存成功或失败后将提示信息返回给客户端;
<php
$gifUrl= $_POST['gifUrl']; $img = file_get_contents($gifUrl); $status = file_put_contents(time()."_".rand(1111,9999).'.gif',$img);
If($status){
return json_encode(array('status'=>200));
}else{
return json_encode(array('status'=>500));
} >。