console
let fontData, textAnimationData;
let type = "flower";//transition 、effect 、text 、flower、animation
let canvas = document.getElementById('canvas');
let editor = new Editor(canvas);
let wordArt, wordArt1;
let fontNum = 0;
let animation1, animation2, animation3, textType, stickerNode, textNode, sticker_url, text_url;
let audioNode = {};
let audioTrack = {};
let effectNode = {};
let effectTrack = {};
let materialNode = {};
let videoTrack = {};
let transitionNode = {};
let extraNode = {};
effectNode['1a-aIFhT7-WAICmj0GUO2Tvk'] = editor.effect({
title: 'lut',
vertexShader:
'#define GLSLIFY 1\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nvarying vec2 v_texCoord;\n\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n}\n',
fragmentShader:
'precision mediump float;\n#define GLSLIFY 1\n\nuniform float power;\nuniform sampler2D from;\nuniform sampler2D lut;\n\nvarying vec2 v_texCoord;\n\nvec4 transition(vec2 invUv){\n vec2 useUv = vec2(invUv.x, invUv.y);\n\n vec4 textureColor = texture2D(from, useUv);\n\n float blueColor = textureColor.b * 63.0;\n\n vec2 quad1;\n quad1.y = floor(floor(blueColor) / 8.0);\n quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\n vec2 quad2;\n quad2.y = floor(ceil(blueColor) / 8.0);\n quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\n vec2 texPos1;\n texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n texPos1.y = 1. - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\n vec2 texPos2;\n texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n texPos2.y = 1. - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\n vec4 newColor1 = texture2D(lut, texPos1);\n vec4 newColor2 = texture2D(lut, texPos2);\n\n vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n return mix(textureColor, vec4(newColor.rgb, textureColor.w), power);\n}\n\nvoid main() {\n gl_FragColor = transition(v_texCoord);\n}\n\n',
inputs: ['from', 'lut'],
properties: {
power: {
type: 'uniform',
value: 1,
},
},
});
effectNode['1a-aIFhT7-WAICmj0GUO2Tvk'].power = 1;
effectNode['1a-aIFhT7-WAICmj0GUO2Tvk'].effect(2.25, 5.25);
extraNode.pz9x3t9r1g = editor.image(
'https://sf1-ttcdn-tos.pstatp.com/obj/ad-material-store/image/989d93400554ccea42a05c57d2938df4',
);
extraNode.pz9x3t9r1g.timelineStart(2.25);
extraNode.pz9x3t9r1g.timelineStop(5.25);
effectNode['1s-aIFhT7-WAICmj0GUO2Tvk'] = editor.effect({
title: 'lut',
vertexShader:
'#define GLSLIFY 1\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nvarying vec2 v_texCoord;\n\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n}\n',
fragmentShader:
'precision mediump float;\n#define GLSLIFY 1\n\nuniform float power;\nuniform sampler2D from;\nuniform sampler2D lut;\n\nvarying vec2 v_texCoord;\n\nvec4 transition(vec2 invUv){\n vec2 useUv = vec2(invUv.x, invUv.y);\n\n vec4 textureColor = texture2D(from, useUv);\n\n float blueColor = textureColor.b * 63.0;\n\n vec2 quad1;\n quad1.y = floor(floor(blueColor) / 8.0);\n quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\n vec2 quad2;\n quad2.y = floor(ceil(blueColor) / 8.0);\n quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\n vec2 texPos1;\n texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n texPos1.y = 1. - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\n vec2 texPos2;\n texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n texPos2.y = 1. - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\n vec4 newColor1 = texture2D(lut, texPos1);\n vec4 newColor2 = texture2D(lut, texPos2);\n\n vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n return mix(textureColor, vec4(newColor.rgb, textureColor.w), power);\n}\n\nvoid main() {\n gl_FragColor = transition(v_texCoord);\n}\n\n',
inputs: ['from', 'lut'],
properties: {
power: {
type: 'uniform',
value: 1,
},
},
});
effectNode['1s-aIFhT7-WAICmj0GUO2Tvk'].power = 0.35;
effectNode['1s-aIFhT7-WAICmj0GUO2Tvk'].effect(12.09, 15.09);
extraNode.vxp3ddlrqc = editor.image(
'https://sf1-ttcdn-tos.pstatp.com/obj/ad-material-store/image/1330ff7b7d2efeac1dd5764195747b23',
);
extraNode.vxp3ddlrqc.timelineStart(12.09);
extraNode.vxp3ddlrqc.timelineStop(15.09);
effectNode['t-aIFhT7-WAICmj0GUO2Tvk'] = editor.effect({
title: 'lut',
vertexShader:
'#define GLSLIFY 1\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\nvarying vec2 v_texCoord;\n\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n v_texCoord = a_texCoord;\n}\n',
fragmentShader:
'precision mediump float;\n#define GLSLIFY 1\n\nuniform float power;\nuniform sampler2D from;\nuniform sampler2D lut;\n\nvarying vec2 v_texCoord;\n\nvec4 transition(vec2 invUv){\n vec2 useUv = vec2(invUv.x, invUv.y);\n\n vec4 textureColor = texture2D(from, useUv);\n\n float blueColor = textureColor.b * 63.0;\n\n vec2 quad1;\n quad1.y = floor(floor(blueColor) / 8.0);\n quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\n vec2 quad2;\n quad2.y = floor(ceil(blueColor) / 8.0);\n quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\n vec2 texPos1;\n texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n texPos1.y = 1. - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\n vec2 texPos2;\n texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n texPos2.y = 1. - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\n vec4 newColor1 = texture2D(lut, texPos1);\n vec4 newColor2 = texture2D(lut, texPos2);\n\n vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n return mix(textureColor, vec4(newColor.rgb, textureColor.w), power);\n}\n\nvoid main() {\n gl_FragColor = transition(v_texCoord);\n}\n\n',
inputs: ['from', 'lut'],
properties: {
power: {
type: 'uniform',
value: 1,
},
},
});
effectNode['t-aIFhT7-WAICmj0GUO2Tvk'].power = 0.36;
effectNode['t-aIFhT7-WAICmj0GUO2Tvk'].effect(3.62, 6.62);
extraNode['526isxldebm'] = editor.image(
'https://sf1-ttcdn-tos.pstatp.com/obj/ad-material-store/image/f234dde921f48815154c61c147452004',
);
extraNode['526isxldebm'].timelineStart(3.62);
extraNode['526isxldebm'].timelineStop(6.62);
materialNode['8-aIFhT7-WAICmj0GUO2Tvk'] = editor.image(
'https://p6-tada-sign.byteimg.com/tos-cn-i-lqsqysnsqa/9f6526a407b64796919baf9e79526e45~tplv-lqsqysnsqa-image.jpeg?x-expires=1634289363&x-signature=ipV8enIwN2lwZwKBd28bpKEKbbk%3D',
{
width: 720,
height: 694.55,
left: 0,
top: 292.73,
useSourceResolution: false,
},
);
materialNode['8-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(0);
materialNode['8-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(3);
materialNode['1e-aIFhT7-WAICmj0GUO2Tvk'] = editor.image(
'https://p6-tada-sign.byteimg.com/tos-cn-i-lqsqysnsqa/0305ce203beb44ef9915f11107816693~tplv-lqsqysnsqa-image.jpeg?x-expires=1634289363&x-signature=ppRv5doJpGubQmXyqBRhiPg5ENw%3D',
{
width: 720,
height: 687.27,
left: 0,
top: 296.36,
useSourceResolution: false,
},
);
materialNode['1e-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(4.27);
materialNode['1e-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(7.27);
materialNode['1l-aIFhT7-WAICmj0GUO2Tvk'] = editor.video(
'https://lf3-static.bytednsdoc.com/obj/eden-cn/4201eh7nuhpephbozupq/tada/1l-aIFhT7-WAICmj0GUO2Tvk.mp4',
{
attributes: {
loop: true,
volume: 1,
},
sourceOffset: 0,
useEffect: true,
type: 'fade',
fade: {
inTime: 0,
outTime: 0,
},
width: 720,
height: 1280,
left: 0,
top: 0,
playbackRate: 1,
playbackRateType: 'native',
useSourceResolution: false,
},
);
materialNode['1l-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(7.27);
materialNode['1l-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(12.09);
materialNode['5-aIFhT7-WAICmj0GUO2Tvk'] = editor.image(
'https://p3-tada-sign.byteimg.com/tos-cn-i-lqsqysnsqa/7190f828d5564f8b856b8be9d3086141~tplv-lqsqysnsqa-image.jpeg?x-expires=1634289363&x-signature=izNVJbvY0uyWMQUJW%2BG1J8RTAqg%3D',
{
width: 720,
height: 592.73,
left: 0,
top: 343.64,
useSourceResolution: false,
},
);
materialNode['5-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(0.33);
materialNode['5-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(3.57);
materialNode['e-aIFhT7-WAICmj0GUO2Tvk'] = editor.image(
'https://p9-tada-sign.byteimg.com/tos-cn-i-lqsqysnsqa/052084a71c52435cac60ae3cc3a322d7~tplv-lqsqysnsqa-image.jpeg?x-expires=1634289363&x-signature=Ba7c2%2Fq20w%2FXHXC3Ki28%2BPHxyhk%3D',
{
width: 720,
height: 720,
left: 0,
top: 280,
useSourceResolution: false,
},
);
materialNode['e-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(4.07);
materialNode['e-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(9.440000000000001);
materialNode['1o-aIFhT7-WAICmj0GUO2Tvk'] = editor.video(
'https://lf3-static.bytednsdoc.com/obj/eden-cn/4201eh7nuhpephbozupq/tada/1o-aIFhT7-WAICmj0GUO2Tvk.mp4',
{
attributes: {
loop: true,
volume: 1,
},
sourceOffset: 0,
useEffect: true,
type: 'fade',
fade: {
inTime: 0,
outTime: 0,
},
width: 720,
height: 405,
left: 0,
top: 437.5,
playbackRate: 1,
playbackRateType: 'native',
useSourceResolution: false,
},
);
materialNode['1o-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(9.66);
materialNode['1o-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(19.671);
const bgTrack = editor.track({ type: 'video', zIndex: -1 });
const bgNode = editor.image(
'https://lf3-static.bytednsdoc.com/obj/eden-cn/4201eh7nuhpephbozupq/creative-video-editor/vertical.jpg',
{
left: 0,
top: 0,
width: 720,
height: 1280,
},
);
bgNode.timelineStart(0);
bgNode.timelineStop(19.671);
bgTrack.addNode({ node: bgNode });
effectTrack['1b-aIFhT7-WAICmj0GUO2Tvk'] = editor.track({ type: 'effect' });
effectTrack['1h-aIFhT7-WAICmj0GUO2Tvk'] = editor.track({ type: 'effect' });
videoTrack['9-aIFhT7-WAICmj0GUO2Tvk'] = editor.track({
type: 'video',
zIndex: 98,
});
videoTrack['6-aIFhT7-WAICmj0GUO2Tvk'] = editor.track({
type: 'video',
zIndex: 97,
});
videoTrack['6-aIFhT7-WAICmj0GUO2Tvk'].addNode({
node: materialNode['5-aIFhT7-WAICmj0GUO2Tvk'],
});
videoTrack['6-aIFhT7-WAICmj0GUO2Tvk'].addNode({
node: materialNode['e-aIFhT7-WAICmj0GUO2Tvk'],
});
videoTrack['6-aIFhT7-WAICmj0GUO2Tvk'].addNode({
node: materialNode['1o-aIFhT7-WAICmj0GUO2Tvk'],
});
videoTrack['9-aIFhT7-WAICmj0GUO2Tvk'].addNode({
node: materialNode['8-aIFhT7-WAICmj0GUO2Tvk'],
});
videoTrack['9-aIFhT7-WAICmj0GUO2Tvk'].addNode({
node: materialNode['1e-aIFhT7-WAICmj0GUO2Tvk'],
});
videoTrack['9-aIFhT7-WAICmj0GUO2Tvk'].addNode({
node: materialNode['1l-aIFhT7-WAICmj0GUO2Tvk'],
});
effectTrack['1h-aIFhT7-WAICmj0GUO2Tvk'].addEffect({
effect: effectNode['t-aIFhT7-WAICmj0GUO2Tvk'],
secondaryNode: [extraNode['526isxldebm']],
});
effectTrack['1b-aIFhT7-WAICmj0GUO2Tvk'].addEffect({
effect: effectNode['1a-aIFhT7-WAICmj0GUO2Tvk'],
secondaryNode: [extraNode.pz9x3t9r1g],
});
effectTrack['1b-aIFhT7-WAICmj0GUO2Tvk'].addEffect({
effect: effectNode['1s-aIFhT7-WAICmj0GUO2Tvk'],
secondaryNode: [extraNode.vxp3ddlrqc],
});
materialNode['5-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(0.33);
materialNode['5-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(3.57);
materialNode['e-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(4.07);
materialNode['e-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(9.440000000000001);
materialNode['1o-aIFhT7-WAICmj0GUO2Tvk'].setSourceOffset(0);
materialNode['1o-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(9.66);
materialNode['1o-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(19.671);
materialNode['1o-aIFhT7-WAICmj0GUO2Tvk'].volume = 1;
materialNode['8-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(0);
materialNode['8-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(3);
materialNode['1e-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(4.27);
materialNode['1e-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(7.27);
materialNode['1l-aIFhT7-WAICmj0GUO2Tvk'].setSourceOffset(0);
materialNode['1l-aIFhT7-WAICmj0GUO2Tvk'].timelineStart(7.27);
materialNode['1l-aIFhT7-WAICmj0GUO2Tvk'].timelineStop(12.09);
materialNode['1l-aIFhT7-WAICmj0GUO2Tvk'].volume = 1;
effectNode['t-aIFhT7-WAICmj0GUO2Tvk'].effect(3.62, 6.62);
extraNode['526isxldebm'].timelineStart(3.62);
extraNode['526isxldebm'].timelineStop(6.62);
effectNode['1a-aIFhT7-WAICmj0GUO2Tvk'].effect(2.25, 5.25);
extraNode.pz9x3t9r1g.timelineStart(2.25);
extraNode.pz9x3t9r1g.timelineStop(5.25);
effectNode['1s-aIFhT7-WAICmj0GUO2Tvk'].effect(12.09, 15.09);
extraNode.vxp3ddlrqc.timelineStart(12.09);
extraNode.vxp3ddlrqc.timelineStop(15.09);
initEvent();
initEditor();
function initEvent() {
let removeNodeDom = document.getElementById('removeNode');
// removeNodeDom.onclick = () => {
// audioNode['a-THmwCZf0cMOmWUGVOmZ9H'] = editor.audio('https://lf3-static.bytednsdoc.com/obj/eden-cn/4201eh7nuhpephbozupq/creative-video-editor/1234.m4a', {
// "attributes": {
// "loop": true,
// "volume": 1
// },
// "sourceOffset": 0,
// "useEffect": true,
// "type": "fade",
// "fade": {
// "inTime": 0,
// "outTime": 0
// },
// "playbackRate": 1,
// "playbackRateType": "wasm",
// "useSourceResolution": true
// })
// audioNode['a-THmwCZf0cMOmWUGVOmZ9H'].timelineStart(0)
// audioNode['a-THmwCZf0cMOmWUGVOmZ9H'].timelineStop(30.898)
// audioNode['7-THmwCZf0cMOmWUGVOmZ9H'].setSourceOffset(0)
// audioNode['7-THmwCZf0cMOmWUGVOmZ9H'].timelineStart(0)
// audioNode['7-THmwCZf0cMOmWUGVOmZ9H'].timelineStop(3)
// audioTrack['8-THmwCZf0cMOmWUGVOmZ9H'].addNode({ node: audioNode['a-THmwCZf0cMOmWUGVOmZ9H'] })
// audioNode['a-THmwCZf0cMOmWUGVOmZ9H'].volume = 1
// }
}
function initEditor() {
let graphCanvas = document.getElementById('graph');
Editor.utils.visualiseVideoContextGraph(editor, graphCanvas, true);
editor.on('timeupdate', () => {
Editor.utils.visualiseVideoContextGraph(editor, graphCanvas);
})
InitVisualisations(editor, 'timeline-canvas', 'currentTime');
playButton.onclick = () => {
editor.play();
}
pauseButton.onclick = editor.pause.bind(editor);
let interactiveBox = editor.initInteractiveBox(wrapper, {
rotatable: true,
});
}
<div class="wrapper" id="wrapper">
<canvas width="720" height="1280" id="canvas"></canvas>
</div>
<button id="playButton">play</button>
<button id="pauseButton">pause</button></br>
<button id="removeNode">轨道一移除节点</button>
<button id="addNode">轨道二添加节点</button>
<p id="currentTime">
</p>
<p>
<canvas id="timeline-canvas" width="640" height="20"></canvas>
</p>
<canvas width="640" height="360" id="graph"></canvas>
html {
font-family: monospace;
color: #333;
}
#current {
font-size: 12px;
}
#canvas {
width: 320px;
height: 640px;
}
#canvas2 {
width: 640px;
height: 360px;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}
#container {
position: relative;
}
button {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid transparent;
cursor: pointer;
user-select: none;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
color: rgba(0,0,0,0.65);
background-color: #fff;
border-color: #d9d9d9;
outline: 0;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
}
button:hover {
color: #40a9ff;
background-color: #fff;
border-color: #40a9ff;
}
button:active {
color: #096dd9;
background-color: #fff;
border-color: #096dd9;
}
input[type="text"] {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 32px;
line-height: 32px;
outline: none;
padding: 0 8px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 50px;
}
.wrapper {
width: 320px;
height: 640px;
position: relative;
}
@font-face {
font-family: "hardFont";
src: url('./../../assets/hardFont.ttf');
}
#bg-video{
width:640px;
height:400px;
}
#changeSrc{
width:80%;
height:40px;
line-height: 40px;
}