NW.JS之MP4转GIF代码,JS代码库,德仔网

代码语言

代码分类

【JS】 NW.JS之MP4转GIF

作者:L3ve / 发布于2015/2/15/ 525


	zweiGif = (function () {
	
	 var video = ele("#zweiVideo"),
	 canvas = document.createElement("canvas"),
	 i,
	 w = 100,
	 h = 100,
	 status = "start",
	 gif = new GIF({
	 workers: 4,
	 quality: 10,
	 workerScript: 'gif.worker.js'
	 });
	
	
	 function Zweigif() {
	 }
	
	 function loop() {
	 canvas.getContext("2d").drawImage(video, 0, 0, w, h);
	 gif.addFrame(canvas, {copy: true, delay: 20});
	 i = requestAnimationFrame(loop);
	 }
	
	 document.onkeydown = function () {
	 console.log(window.event.keyCode);
	 if (window.event && window.event.keyCode == 32) {
	 event.cancelBubble = true;
	 makeGif();
	 }
	 };
	
	 function makeGif() {
	 if (status == "start") {
	 gif.abort();
	 gif.frames = [];
	 i = loop();
	 document.querySelector("#drag").classList.add("flashing");
	 ele("#per").innerHTML = "录制中！~";
	
	 status = "end";
	 this.innerHTML = "end";
	 } else {
	 cancelAnimationFrame(i);
	 gif.render();
	 status = "start";
	 this.innerHTML = "start";
	 }
	 }
	
	 canvas.width = w;
	 canvas.height = h;
	//视频转gif
	 Zweigif.prototype.makeGif = function () {
	
	 gif.on('finished', function (blob) {
	 var img = document.createElement("img"),
	 div = document.createElement("div");
	 img.setAttribute("src", URL.createObjectURL(blob));
	 div.setAttribute("class", "box");
	 div.appendChild(img);
	 ele("#video-gif").appendChild(div);
	 document.querySelector("#drag").classList.remove("flashing");
	
	 //消除子元素继承父元素的事件
	 img.addEventListener('click', function (e) {
	 e.stopPropagation();
	 }, false);
	 div.addEventListener('click', function () {
	 div.parentNode.removeChild(div);
	 }, false);
	
	 });
	 gif.on('progress', function (p) {
	 if (p == 1) {
	 ele("#per").innerHTML = "已完成！~";
	 } else {
	 ele("#per").innerHTML = Math.round(p * 100) + "%";
	 }
	 });
	 };
	
	 Zweigif.prototype.setGif = function (neww, newh) {
	 gif = null;
	 w = neww;
	 h = newh;
	 canvas.width = w;
	 canvas.height = h;
	 gif = new GIF({
	 workers: 4,
	 quality: 1,
	 workerScript: 'gif.worker.js',
	 width: neww,
	 height: newh
	 });
	 };
	
	 return new Zweigif();
	})();

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　MP4转GIF　

同语言下

可能有用的

L3ve贡献的其它代码(1)

.NW.JS之MP4转GIF