本发明涉及web开发与应用技术领域，特别涉及一种网页版的调用html5视频录制动画gif图像的方法。
背景技术：
gif格式指的是图像交换格式（graphicsinterchangeformat，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）；
<buttonid="startbtn">开始录制</button>
<buttonid="stopbtn">停止录制</button>
<hr>
<imgsrc=""alt=""/>。
步骤二、需要引用recordrtc.js、jquery.js，recordrtc.js会协助我们将视频信息转换为gif图像信息，而jquery.js则帮助我们快速的操作元素；
<scriptsrc="https://cdn.webrtc-experiment.com/recordrtc.js"></script>
<scriptsrc="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();
})
functionuploadgif(){
varsrc=$("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){
returnjson_encode(array('status'=>200));
}else{
returnjson_encode(array('status'=>500));
}>。