added image support for skottie renderer
diff --git a/images/index.js b/images/index.js
index 3e1d51d..a38be9d 100644
--- a/images/index.js
+++ b/images/index.js
@@ -63,13 +63,12 @@
...defaultSettings,
...commandLineArgs(opts),
};
- console.log(settings);
return settings;
};
const wait = (time) => new Promise((resolve) => setTimeout(resolve, time));
-const files = [
+const filesData = [
{
path: '/js/main.js',
filePath: './js/main.js',
@@ -114,8 +113,9 @@
},
{
path: '/lottie.json',
- // filePath: '../examples/rectangle.json',
- filePath: './data.json',
+ // filePath: '../examples/image.json',
+ filePath: '../examples/rectangle.json',
+ // filePath: './data.json',
type: 'json',
},
{
@@ -151,12 +151,12 @@
const startServer = async () => {
const app = express();
- await Promise.all(files.map(async (file) => {
+ await Promise.all(filesData.map(async (file) => {
const fileData = await readFile(file.filePath, getEncoding(file.type));
app.get(file.path, async (req, res) => {
res.writeHead(200, getContentTypeHeader(file.type));
// TODO: comment line. Only for live updates.
- const fileData = await readFile(file.filePath, getEncoding(file.type));
+ // const fileData = await readFile(file.filePath, getEncoding(file.type));
res.end(fileData);
});
return file;
diff --git a/images/js/main.js b/images/js/main.js
index dc7df99..de0bb1c 100644
--- a/images/js/main.js
+++ b/images/js/main.js
@@ -6,7 +6,8 @@
renderer: 'skottie',
sampleRate: 1,
resolution: 1,
- path: 'lottie.json',
+ // path: 'lottie.json',
+ path: '../examples/image.json',
};
searchParams.forEach((value, key) => {
defaultValues[key] = value;
diff --git a/images/js/screenshot_skottie.js b/images/js/screenshot_skottie.js
index 3662914..1eb75de 100644
--- a/images/js/screenshot_skottie.js
+++ b/images/js/screenshot_skottie.js
@@ -24,7 +24,7 @@
return animData;
};
-const createSkottiePlayer = async (canvasKit, animationData, canvas) => {
+const createSkottiePlayer = async (canvasKit, animationData, canvas, assets) => {
// const { devicePixelRatio } = window; // TODO: check if using the pixel ratio is preferred.
const devicePixelRatio = 1;
canvas.width = devicePixelRatio * animationData.w; // eslint-disable-line no-param-reassign
@@ -32,7 +32,7 @@
const surface = canvasKit.MakeCanvasSurface(canvas);
const skcanvas = surface.getCanvas();
const animation = canvasKit.MakeManagedAnimation(
- JSON.stringify(animationData), {}, '',
+ JSON.stringify(animationData), assets, '',
);
const goToAndStop = (pos) => {
@@ -69,12 +69,31 @@
}
};
+const getAssets = async (animationData, rendererSettings) => {
+ const assets = {
+
+ };
+ await Promise.all(
+ animationData.assets
+ .filter((asset) => asset.p && asset.u)
+ .map(async (asset) => {
+ const assetPathParts = rendererSettings.path.split('/');
+ assetPathParts.pop();
+ const assetPath = `${assetPathParts.join('/')}/`;
+ const assetData = await fetch(assetPath + asset.u + asset.p);
+ assets[asset.p] = await assetData.arrayBuffer();
+ }),
+ );
+ return assets;
+};
+
const start = async (rendererSettings) => {
try {
const canvasKit = await loadSkottieModule();
const animationData = await getAnimationData(rendererSettings);
const canvas = await createCanvas(animationData);
- const skottiePlayer = await createSkottiePlayer(canvasKit, animationData, canvas);
+ const assets = await getAssets(animationData, rendererSettings);
+ const skottiePlayer = await createSkottiePlayer(canvasKit, animationData, canvas, assets);
await iterateFrames(skottiePlayer, animationData, canvas, rendererSettings);
} catch (error) {
console.log('ERROR'); // eslint-disable-line no-console
