|
|
|
|
|
let createCanvas = null;
|
|
|
let loadImage = null;
|
|
|
let createImageData = null;
|
|
|
|
|
|
const isWeb = typeof window != 'undefined';
|
|
|
if (isWeb) {
|
|
|
loadImage = function(imageUrl) {
|
|
|
return new Promise(function (resolve, reject) {
|
|
|
var img = new Image;
|
|
|
img.setAttribute('crossOrigin', 'anonymous');
|
|
|
img.src = imageUrl;
|
|
|
img.onload = function () {
|
|
|
resolve(img);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
} else {
|
|
|
const canvas = require('canvas');
|
|
|
createCanvas = canvas.createCanvas;
|
|
|
loadImage = canvas.loadImage;
|
|
|
createImageData = canvas.createImageData;
|
|
|
}
|
|
|
|
|
|
Date.prototype.Format = function(fmt) { //author: meizz
|
|
|
var o = {
|
|
|
"M+": this.getMonth() + 1, //月份
|
|
|
"d+": this.getDate(), //日
|
|
|
"h+": this.getHours(), //小时
|
|
|
"m+": this.getMinutes(), //分
|
|
|
"s+": this.getSeconds(), //秒
|
|
|
"S": this.getMilliseconds() //毫秒
|
|
|
};
|
|
|
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
|
for (var k in o)
|
|
|
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
|
return fmt;
|
|
|
}
|
|
|
|
|
|
class ImageObject {
|
|
|
constructor(imageIndex, imageUrl, thumbWidth, thumbHeight, displayEndTime) {
|
|
|
this.imageIndex = imageIndex;
|
|
|
this.imageUrl = imageUrl;
|
|
|
this.imageData = null;
|
|
|
this.isAnimationEnd = false;
|
|
|
this.displayEndTime = displayEndTime;
|
|
|
this.nowStep = 1;
|
|
|
this.width = thumbWidth;
|
|
|
this.height = thumbHeight;
|
|
|
this.canvas = null;
|
|
|
this.ctx = null;
|
|
|
}
|
|
|
|
|
|
async load() {
|
|
|
this.image = await loadImage(this.imageUrl);
|
|
|
if (typeof document != 'undefined') {
|
|
|
if ($('J_thumbImageCanvas_' + this.imageIndex).length == 0) {
|
|
|
$('#J_cerateVideoPlayer').append('<canvas id="J_thumbImageCanvas_'+this.imageIndex+'" style="display: none"></canvas>')
|
|
|
}
|
|
|
this.canvas = document.getElementById('J_thumbImageCanvas_' + this.imageIndex);
|
|
|
this.canvas.width = this.width;
|
|
|
this.canvas.height = this.height;
|
|
|
} else {
|
|
|
this.canvas = createCanvas(this.width, this.height);
|
|
|
}
|
|
|
this.ctx = this.canvas.getContext('2d');
|
|
|
|
|
|
let x = (this.canvas.width - this.image.width)/2;
|
|
|
let y = (this.canvas.height - this.image.height)/2;
|
|
|
if (x < y && x < 0) {
|
|
|
let scale = this.canvas.width / this.image.width;
|
|
|
this.ctx.scale(scale, scale);
|
|
|
x = y = 0;
|
|
|
} else if (y <= x && y < 0) {
|
|
|
let scale = this.canvas.height / this.image.height;
|
|
|
this.ctx.scale(scale, scale);
|
|
|
x = y = 0;
|
|
|
} else {
|
|
|
this.ctx.scale(1, 1);
|
|
|
}
|
|
|
|
|
|
this.ctx.fillStyle = 'white';
|
|
|
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
this.ctx.drawImage(this.image, x, y, this.image.width, this.image.height);
|
|
|
this.imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
|
|
|
//console.log('load ', this.imageUrl,this.width, this.height, this.image.width, this.image.height);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class CanvasVideo {
|
|
|
constructor(imageUrlList, videoEffect, musicCode, videoSeconds, width, height, saveFilename, progressCallback) {
|
|
|
//canvas
|
|
|
this.progressCallbackTimer = null;
|
|
|
this.progressCallback = progressCallback;
|
|
|
this.videoPlayStatus = 'wait';
|
|
|
this.isWeb = typeof window != 'undefined';
|
|
|
this.width = width;
|
|
|
this.height = height;
|
|
|
this.fps = 30;
|
|
|
this.saveFilename = saveFilename;
|
|
|
|
|
|
if (this.isWeb) {
|
|
|
this.canvas = document.getElementById('J_videoCanvas');
|
|
|
} else {
|
|
|
this.canvas = createCanvas(this.width, this.height);
|
|
|
}
|
|
|
this.ctx = this.canvas.getContext('2d');
|
|
|
this.ctx.clearRect(0,0, this.canvas.width, this.canvas.height);
|
|
|
|
|
|
//video
|
|
|
this.videoEffect = videoEffect;
|
|
|
this.musicCode = musicCode;
|
|
|
this.imageTime = Math.floor(videoSeconds * 1000 / imageUrlList.length);
|
|
|
this.videoTotalTime = videoSeconds * 1000;
|
|
|
this.currentTime = 0;
|
|
|
this.imageObjectList = [];
|
|
|
for(let i in imageUrlList) {
|
|
|
let displayEndTime = Math.floor(this.imageTime * (parseInt(i)+1));
|
|
|
this.imageObjectList.push(new ImageObject(i, imageUrlList[i], width, height, displayEndTime));
|
|
|
}
|
|
|
|
|
|
this.initEncoder();
|
|
|
}
|
|
|
|
|
|
initEncoder() {
|
|
|
|
|
|
}
|
|
|
|
|
|
debug() {
|
|
|
//console.log(...arguments);
|
|
|
}
|
|
|
|
|
|
renderSceneFade() {
|
|
|
let imageIndex = this.getCurrentImageIndex();
|
|
|
let imageObj = this.imageObjectList[imageIndex];
|
|
|
let lastImageObj = imageIndex > 0 ? this.imageObjectList[imageIndex-1] : false;
|
|
|
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
this.debug('isAnimationEnd skip ', imageIndex);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!lastImageObj) {
|
|
|
this.debug('first .. ', this.currentTime, imageObj.displayEndTime);
|
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
this.ctx.globalAlpha = 1;
|
|
|
if (this.isWeb) {
|
|
|
this.ctx.putImageData(imageObj.imageData, 0, 0);
|
|
|
} else {
|
|
|
this.encoder.setDelay(imageObj.displayEndTime - this.currentTime);
|
|
|
this.encoder.addFrame(imageObj.imageData.data);
|
|
|
}
|
|
|
imageObj.isAnimationEnd = true;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var step = 20;
|
|
|
let nowStep = imageObj.nowStep;
|
|
|
var endImageData = imageObj.imageData
|
|
|
var startImageData = lastImageObj.imageData;
|
|
|
if (this.isWeb) {
|
|
|
var imageData = this.ctx.createImageData(imageObj.width, imageObj.height);
|
|
|
} else {
|
|
|
var imageData = createImageData(imageObj.width, imageObj.height);
|
|
|
}
|
|
|
for (var x = 1; x <= imageObj.width; x+=1) {
|
|
|
for (var y = 1; y <= imageObj.height; y+= 1) {
|
|
|
var index = 4 * ((y - 1) * imageObj.width + (x - 1));
|
|
|
// 变为绿色，色值依次是0, 128, 0, 256
|
|
|
// imagedata.data[index] = 0;
|
|
|
// imagedata.data[index + 1] = 128;
|
|
|
// imagedata.data[index + 2] = 0;
|
|
|
// imagedata.data[index + 3] = 256;
|
|
|
for( var i=0;i<3;i++) {
|
|
|
imageData.data[index + i] = (endImageData.data[index + i] - startImageData.data[index + i]) / step * nowStep +startImageData.data[index + i];
|
|
|
}
|
|
|
imageData.data[index + 3] = 256;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
imageObj.isAnimationEnd = step==nowStep;
|
|
|
imageObj.nowStep++;
|
|
|
|
|
|
this.debug(imageObj.displayEndTime, imageObj.isAnimationEnd,imageObj.nowStep,imageObj.width,imageObj.height )
|
|
|
|
|
|
if (this.isWeb) {
|
|
|
this.ctx.putImageData(imageData, 0, 0);
|
|
|
} else {
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
this.encoder.setDelay(imageObj.displayEndTime - this.currentTime);
|
|
|
} else {
|
|
|
this.encoder.setFrameRate(this.fps);
|
|
|
}
|
|
|
this.encoder.addFrame(imageData.data);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
renderSceneZoom() {
|
|
|
let imageIndex = this.getCurrentImageIndex();
|
|
|
let imageObj = this.imageObjectList[imageIndex];
|
|
|
|
|
|
if (typeof imageObj.scale == 'undefined') {
|
|
|
imageObj.scale = 0.8;
|
|
|
}
|
|
|
if (typeof imageObj.alpha == 'undefined') {
|
|
|
imageObj.alpha = 0.5;
|
|
|
}
|
|
|
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
this.debug('isAnimationEnd skip ', imageIndex);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// this.ctx.globalAlpha = 1;
|
|
|
// this.ctx.fillStyle = 'white';
|
|
|
// this.ctx.fillRect(0, 0, this.width, this.height);
|
|
|
|
|
|
let frameCount = Math.ceil(500/1000*this.fps);
|
|
|
imageObj.scale += 0.4/frameCount;
|
|
|
imageObj.scale = Math.min(1.2, imageObj.scale);
|
|
|
imageObj.alpha += 0.5/frameCount;
|
|
|
imageObj.alpha = Math.min(1, imageObj.alpha);
|
|
|
|
|
|
imageObj.isAnimationEnd = imageObj.scale==1.2;
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
imageObj.alpha = 1;
|
|
|
!this.isWeb && this.encoder.setDelay(imageObj.displayEndTime - this.currentTime);
|
|
|
} else {
|
|
|
!this.isWeb && this.encoder.setFrameRate(this.fps);
|
|
|
}
|
|
|
|
|
|
let newX = (imageObj.width * imageObj.scale - imageObj.width)/-2;
|
|
|
let newY = (imageObj.height * imageObj.scale - imageObj.height)/-2;
|
|
|
this.ctx.globalAlpha = imageObj.alpha;
|
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
this.ctx.drawImage(imageObj.canvas, newX, newY, imageObj.width * imageObj.scale, imageObj.height * imageObj.scale);
|
|
|
this.debug('add frame ', imageObj.scale, imageObj.alpha);
|
|
|
!this.isWeb && this.encoder.addFrame(this.ctx);
|
|
|
}
|
|
|
|
|
|
renderSceneSlide() {
|
|
|
let imageIndex = this.getCurrentImageIndex();
|
|
|
let imageObj = this.imageObjectList[imageIndex];
|
|
|
|
|
|
let direction = imageIndex % 2 == 0 ? 'left': 'right';
|
|
|
let moveDistance = Math.ceil(imageObj.width / 2);
|
|
|
let duration = 500;
|
|
|
|
|
|
if (typeof imageObj.moveX == 'undefined') {
|
|
|
imageObj.moveX = direction == 'left' ? -moveDistance : moveDistance;
|
|
|
}
|
|
|
if (typeof imageObj.alpha == 'undefined') {
|
|
|
imageObj.alpha = 0;
|
|
|
}
|
|
|
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
this.debug('isAnimationEnd skip ', imageIndex);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (imageIndex == 0) {
|
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
this.ctx.globalAlpha = 1;
|
|
|
this.ctx.fillStyle = 'white';
|
|
|
this.ctx.fillRect(0, 0, this.width, this.height);
|
|
|
}
|
|
|
|
|
|
let frameCount = Math.ceil(duration/1000*this.fps);
|
|
|
let moveStep = Math.ceil(moveDistance / frameCount) * (direction == 'left' ? 1 : -1);
|
|
|
imageObj.moveX += moveStep;
|
|
|
if (direction == 'left') {
|
|
|
imageObj.moveX = Math.min(0, imageObj.moveX);
|
|
|
} else {
|
|
|
imageObj.moveX = Math.max(0, imageObj.moveX);
|
|
|
}
|
|
|
imageObj.alpha += 1/frameCount;
|
|
|
imageObj.alpha = Math.min(1, imageObj.alpha);
|
|
|
|
|
|
imageObj.isAnimationEnd = imageObj.moveX==0;
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
imageObj.alpha = 1;
|
|
|
!this.isWeb && this.encoder.setDelay(imageObj.displayEndTime - this.currentTime);
|
|
|
} else {
|
|
|
!this.isWeb && this.encoder.setFrameRate(this.fps);
|
|
|
}
|
|
|
this.ctx.globalAlpha = imageObj.alpha;
|
|
|
this.ctx.drawImage(imageObj.canvas, imageObj.moveX, 0, imageObj.width, imageObj.height);
|
|
|
this.debug('add frame ', imageObj.moveX, imageObj.alpha);
|
|
|
!this.isWeb && this.encoder.addFrame(this.ctx);
|
|
|
}
|
|
|
|
|
|
renderShutters() {
|
|
|
let imageIndex = this.getCurrentImageIndex();
|
|
|
let imageObj = this.imageObjectList[imageIndex];
|
|
|
let lastImageObj = imageIndex > 0 ? this.imageObjectList[imageIndex-1] : false;
|
|
|
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
this.debug('isAnimationEnd skip ', imageIndex);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (!lastImageObj) {
|
|
|
this.debug('first .. ', this.currentTime, imageObj.displayEndTime);
|
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
this.ctx.globalAlpha = 1;
|
|
|
if (this.isWeb) {
|
|
|
this.ctx.putImageData(imageObj.imageData, 0, 0);
|
|
|
} else {
|
|
|
this.encoder.setDelay(imageObj.displayEndTime - this.currentTime);
|
|
|
this.encoder.addFrame(imageObj.imageData.data);
|
|
|
}
|
|
|
imageObj.isAnimationEnd = true;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var direction = imageIndex % 4;
|
|
|
var step = 900 / 1000 * this.fps;
|
|
|
var lineWidth = 40;
|
|
|
var lineDistance = 30;
|
|
|
let nowStep = imageObj.nowStep;
|
|
|
var endImageData = imageObj.imageData
|
|
|
var startImageData = lastImageObj.imageData;
|
|
|
if (this.isWeb) {
|
|
|
var imageData = this.ctx.createImageData(imageObj.width, imageObj.height);
|
|
|
} else {
|
|
|
var imageData = createImageData(imageObj.width, imageObj.height);
|
|
|
}
|
|
|
for (var x = 1; x <= imageObj.width; x+=1) {
|
|
|
for (var y = 1; y <= imageObj.height; y+= 1) {
|
|
|
var index = 4 * ((y - 1) * imageObj.width + (x - 1));
|
|
|
if (direction == 0) {
|
|
|
let lineTotal = Math.ceil(imageObj.width / lineWidth);
|
|
|
let lineIndex = Math.ceil(x /lineWidth);
|
|
|
let oldPixMaxY = imageObj.height - imageObj.height / step * nowStep;
|
|
|
oldPixMaxY = oldPixMaxY - (lineTotal - lineIndex) * lineWidth / 3 * 2;
|
|
|
for (var i = 0; i < 4; i++) {
|
|
|
imageData.data[index + i] = y < oldPixMaxY ? startImageData.data[index + i] : endImageData.data[index + i];
|
|
|
}
|
|
|
imageData.data[index + 3] = 256;
|
|
|
} else if (direction == 1) {
|
|
|
let lineTotal = Math.ceil(imageObj.height / lineWidth);
|
|
|
let lineIndex = Math.ceil(y /lineWidth);
|
|
|
let oldPixMinX = imageObj.width / step * nowStep;
|
|
|
oldPixMinX = oldPixMinX + (lineTotal - lineIndex) * lineWidth / 3 * 2;
|
|
|
|
|
|
for (var i = 0; i < 4; i++) {
|
|
|
imageData.data[index + i] = x > oldPixMinX ? startImageData.data[index + i] : endImageData.data[index + i];
|
|
|
}
|
|
|
imageData.data[index + 3] = 256;
|
|
|
} else if (direction == 2) {
|
|
|
let lineTotal = Math.ceil(imageObj.width / lineWidth);
|
|
|
let lineIndex = Math.ceil(x /lineWidth);
|
|
|
let oldPixMinY = imageObj.height / step * nowStep;
|
|
|
oldPixMinY = oldPixMinY + (lineTotal - lineIndex) * lineWidth / 3 * 2;
|
|
|
|
|
|
for (var i = 0; i < 4; i++) {
|
|
|
imageData.data[index + i] = y > oldPixMinY ? startImageData.data[index + i] : endImageData.data[index + i];
|
|
|
}
|
|
|
imageData.data[index + 3] = 256;
|
|
|
} else {
|
|
|
let lineTotal = Math.ceil(imageObj.height / lineWidth);
|
|
|
let lineIndex = Math.ceil(y /lineWidth);
|
|
|
let oldPixMaxX = imageObj.width - imageObj.width / step * nowStep;
|
|
|
oldPixMaxX = oldPixMaxX - (lineTotal - lineIndex) * lineWidth / 3 * 2;
|
|
|
|
|
|
for (var i = 0; i < 4; i++) {
|
|
|
imageData.data[index + i] = x < oldPixMaxX ? startImageData.data[index + i] : endImageData.data[index + i];
|
|
|
}
|
|
|
imageData.data[index + 3] = 256;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
imageObj.isAnimationEnd = step==nowStep;
|
|
|
imageObj.nowStep++;
|
|
|
|
|
|
this.debug(imageObj.displayEndTime, imageObj.isAnimationEnd,imageObj.nowStep,imageObj.width,imageObj.height )
|
|
|
|
|
|
if (this.isWeb) {
|
|
|
this.ctx.putImageData(imageData, 0, 0);
|
|
|
} else {
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
this.encoder.setDelay(imageObj.displayEndTime - this.currentTime);
|
|
|
} else {
|
|
|
this.encoder.setFrameRate(this.fps);
|
|
|
}
|
|
|
this.encoder.addFrame(imageData.data);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
renderRotate() {
|
|
|
let imageIndex = this.getCurrentImageIndex();
|
|
|
let imageObj = this.imageObjectList[imageIndex];
|
|
|
|
|
|
let duration = 300;
|
|
|
let rotateAngle = 45;
|
|
|
|
|
|
if (typeof imageObj.rotate == 'undefined') {
|
|
|
imageObj.rotate = -45;
|
|
|
}
|
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
this.debug('isAnimationEnd skip ', imageIndex);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (imageIndex == 0) {
|
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
|
this.ctx.globalAlpha = 1;
|
|
|
this.ctx.fillStyle = 'white';
|
|
|
this.ctx.fillRect(0, 0, this.width, this.height);
|
|
|
}
|
|
|
|
|
|
let frameCount = Math.ceil(duration / 1000 * this.fps);
|
|
|
let moveStep = Math.ceil(rotateAngle / frameCount);
|
|
|
imageObj.rotate += moveStep;
|
|
|
imageObj.rotate = Math.min(0, imageObj.rotate);
|
|
|
imageObj.isAnimationEnd = imageObj.rotate==0;
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
!this.isWeb && this.encoder.setDelay(imageObj.displayEndTime - this.currentTime);
|
|
|
} else {
|
|
|
!this.isWeb && this.encoder.setFrameRate(this.fps);
|
|
|
}
|
|
|
this.ctx.rotate(imageObj.rotate * Math.PI / 180);
|
|
|
this.ctx.drawImage(imageObj.canvas, 0, 0, imageObj.width, imageObj.height);
|
|
|
this.debug('add frame ', imageObj.moveX, imageObj.alpha);
|
|
|
!this.isWeb && this.encoder.addFrame(this.ctx);
|
|
|
}
|
|
|
|
|
|
renderSceneSkew() {
|
|
|
let imageIndex = this.getCurrentImageIndex();
|
|
|
let imageObj = this.imageObjectList[imageIndex];
|
|
|
|
|
|
let duration = 400;
|
|
|
let angle = 1;
|
|
|
|
|
|
if (typeof imageObj.angle == 'undefined') {
|
|
|
imageObj.angle = 1;
|
|
|
}
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
this.debug('isAnimationEnd skip ', imageIndex);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
let frameCount = Math.ceil(duration / 1000 * this.fps);
|
|
|
let moveStep = angle / frameCount;
|
|
|
imageObj.angle -= moveStep;
|
|
|
imageObj.angle = Math.max(0, imageObj.angle);
|
|
|
imageObj.isAnimationEnd = imageObj.angle==0;
|
|
|
if (imageObj.isAnimationEnd) {
|
|
|
!this.isWeb && this.encoder.setDelay(imageObj.displayEndTime - this.currentTime);
|
|
|
} else {
|
|
|
!this.isWeb && this.encoder.setFrameRate(this.fps);
|
|
|
}
|
|
|
this.ctx.setTransform(1, 0, imageObj.angle, 1, 0, 0);
|
|
|
this.ctx.drawImage(imageObj.canvas, 0, 0, imageObj.width, imageObj.height);
|
|
|
this.debug('add frame ', imageObj.moveX, imageObj.alpha);
|
|
|
//fs.writeFileSync('img/'+idx+'.png', this.canvas.toBuffer());
|
|
|
!this.isWeb && this.encoder.addFrame(this.ctx);
|
|
|
}
|
|
|
|
|
|
getCurrentImageIndex() {
|
|
|
return Math.floor(this.currentTime/this.imageTime);
|
|
|
}
|
|
|
|
|
|
pause() {
|
|
|
this.videoPlayStatus = 'pause';
|
|
|
}
|
|
|
|
|
|
stop() {
|
|
|
this.videoPlayStatus = 'stop';
|
|
|
this.currentTime = 0;
|
|
|
}
|
|
|
|
|
|
play(oneFrame) {
|
|
|
let startTs = (new Date()).getTime();
|
|
|
let timeStep = Math.ceil(1000/this.fps);
|
|
|
let self = this;
|
|
|
if (this.isWeb) {
|
|
|
self.videoPlayStatus = 'playing';
|
|
|
function render() {
|
|
|
if (typeof self.progressCallback == 'function') {
|
|
|
self.progressCallback({
|
|
|
currentImageIndex: self.getCurrentImageIndex(),
|
|
|
videoTotalTime: self.videoTotalTime,
|
|
|
currentTime: self.currentTime,
|
|
|
videoPlayStatus: self.videoPlayStatus,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
if (self.videoPlayStatus == 'pause') {
|
|
|
self.progressCallbackTimer && clearTimeout(self.progressCallbackTimer);
|
|
|
return;
|
|
|
}
|
|
|
if (self.videoPlayStatus == 'stop') {
|
|
|
self.progressCallbackTimer && clearTimeout(self.progressCallbackTimer);
|
|
|
self.currentTime = 0;
|
|
|
return;
|
|
|
}
|
|
|
if (self.videoPlayStatus == 'playing') {
|
|
|
self.render();
|
|
|
self.currentTime += timeStep;
|
|
|
if (oneFrame) {
|
|
|
self.videoPlayStatus = 'pause';
|
|
|
}
|
|
|
if (self.currentTime >= self.videoTotalTime) {
|
|
|
self.videoPlayStatus = 'wait';
|
|
|
self.currentTime = 0;
|
|
|
}
|
|
|
self.progressCallbackTimer = setTimeout(render, timeStep);
|
|
|
}
|
|
|
}
|
|
|
render();
|
|
|
} else {
|
|
|
while(this.currentTime < this.videoTotalTime) {
|
|
|
this.render();
|
|
|
this.currentTime += timeStep;
|
|
|
}
|
|
|
this.encoder.finish();
|
|
|
}
|
|
|
let endTs = (new Date()).getTime();
|
|
|
this.makeGifSeconds = Math.ceil((endTs - startTs)/1000);
|
|
|
}
|
|
|
|
|
|
async loadImages() {
|
|
|
let startTs = (new Date()).getTime();
|
|
|
for (let i = 0; i< this.imageObjectList.length;i++) {
|
|
|
await this.imageObjectList[i].load();
|
|
|
}
|
|
|
this.loadImageSeconds = Math.ceil(((new Date()).getTime() - startTs)/1000);
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
switch (this.videoEffect) {
|
|
|
case 'sceneFade'://淡入当初
|
|
|
this.renderSceneFade();
|
|
|
break;
|
|
|
case 'sceneZoom'://图片放大
|
|
|
this.renderSceneZoom();
|
|
|
break;
|
|
|
case 'sceneSlide'://左右幻灯
|
|
|
this.renderSceneSlide();
|
|
|
break;
|
|
|
case 'sceneShutters'://百叶窗
|
|
|
this.renderShutters();
|
|
|
break;
|
|
|
case 'sceneRotate'://旋转飞入
|
|
|
this.renderRotate();
|
|
|
break;
|
|
|
case 'sceneSkew': //斜角切换
|
|
|
this.renderSceneSkew()
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (typeof module !== 'undefined') {
|
|
|
module.exports = CanvasVideo;
|
|
|
} |