html5动画怎么做成gif,一种网页版的调用html5视频录制动画GIF图像的方法与流程...

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

} >。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值