本发明涉及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));

} >。