一种网页版的调用html5视频录制动画GIF图像的方法技术

本发明专利技术涉及WEB开发与应用技术领域，特别涉及一种网页版的调用html5视频录制动画GIF图像的方法。本发明专利技术方法步骤是：1、定义视频录制动画gif图像需要的标签；2、引用RecordRTC.js、jquery.js；3、点击开始按钮时调用摄像头进行录制动画gif图像；4、点击停止按钮时停止录制动画gif图像并将图片地址发送到服务器；5、服务器将gif图像保存并返回提示信息；本发明专利技术实现了一种网页版的调用html5视频录制动画GIF图像的方法，解决了传统的在录制动画gif图片需要安装软件、工具等实现gif图片与保存的功能，为生成动画gif图片提供了一种方便、快捷、低成本的录制方法。

A webpage version of calling HTML5 video to animate GIF images

The invention relates to the technical field of WEB development and application, in particular to a method for calling HTML 5 video recording and braking GIF images on a web page. The method and steps of the invention are as follows: 1. Define the label needed for video recording and braking gif image; 2. Refer to RecordRTC.js and jquery.js; 3. Call the camera to record and brake GIF image when clicking the start button; 4. Stop recording and braking GIF image when clicking the stop button and send the image address to the server; 5. The invention realizes a method of calling HTML 5 video recording and braking GIF image on the web page, solves the traditional functions of installing software and tools to realize GIF picture and saving, and provides a convenient, fast and low cost for generating animated gif picture. Recording method.

【技术实现步骤摘要】
一种网页版的调用html5视频录制动画GIF图像的方法
本专利技术涉及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));}>。本文档来自技高网...

【技术保护点】
1.一种网页版的调用html5视频录制动画GIF图像的方法，其特征在于：所述的方法包含以下几个步骤：步骤一、定义视频录制动画gif图像需要的标签；步骤二、引用RecordRTC.js、jquery.js；步骤三、 点击开始按钮时调用摄像头进行录制动画gif图像；步骤四、点击停止按钮时停止录制动画gif图像并将图片地址发送到服务器；步骤五、服务器将gif图像保存并返回提示信息。

【技术特征摘要】
1.一种网页版的调用html5视频录制动画GIF图像的方法，其特征在于：所述的方法包含以下几个步骤：步骤一、定义视频录制动画gif图像需要的标签；步骤二、引用RecordRTC.js、jquery.js；步骤三、点击开始按钮时调用摄像头进行录制动画gif图像；步骤四、点击停止按钮时停止录制动画gif图像并将图片地址发送到服务器；步骤五、服务器将gif图像保存并返回提示信息。2.根据权利要求1所述的一种网页版的调用html5视频录制动画GIF图像的方法，其特征在于：所述的步骤一中，需要在录制动画gif图像的页面定义开始按钮标签（button#startBtn）,停止按钮标签（button#stopBtn）,和存储图片信息的图片标签（img）。3.根据权利要求1所述的一种网页版的调用html5视频录制动画GIF图像的方法，其特征在于：所述的步骤二中，需要引用RecordRTC.js、jquery.js，recordRTC.js会协助我们将视频信息转...

【专利技术属性】
技术研发人员：冯捷雄，张来卿，庞严冬，
申请(专利权)人：珠海横琴盛达兆业科技投资有限公司，
类型：发明
国别省市：广东,44