-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
41eecfc
commit 73487ab
Showing
10 changed files
with
149 additions
and
74 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import {FastImageSequence} from '../../src/index'; | ||
|
|
||
| const prevButton = document.getElementById('prev-button-2'); | ||
| const nextButton = document.getElementById('next-button-2'); | ||
| const progress = document.getElementById('slider-input-2'); | ||
|
|
||
| function blobToDataURL(blob) { | ||
| return new Promise((resolve, reject) => { | ||
| const reader = new FileReader(); | ||
| reader.onload = _e => resolve(reader.result); | ||
| reader.onerror = _e => reject(reader.error); | ||
| reader.onabort = _e => reject(new Error("Read aborted")); | ||
| reader.readAsDataURL(blob); | ||
| }); | ||
| } | ||
|
|
||
| export async function initExampleLoadTar(container) { | ||
| // load tar file with lowres previews | ||
| fetch('lowrespreviews.tar').then(async (response) => { | ||
| const blob = await response.blob(); | ||
| const dataURL = await blobToDataURL(blob); | ||
|
|
||
| const fastImageSequence = new FastImageSequence(container, { | ||
| name: 'PlayWithControlTest', | ||
| frames: 89, | ||
| src: [ | ||
| { | ||
| tarURL: dataURL, | ||
| imageURL: (i) => `${('' + (i + 1)).padStart(4, '0')}.jpg`, | ||
| } | ||
| ], | ||
| // optional arguments: | ||
| loop: true, // default false | ||
| objectFit: 'contain', // default 'cover' | ||
| fillStyle: '#00000000', // default #00000000 | ||
| clearCanvas: false, // default false | ||
| showDebugInfo: true, | ||
| }); | ||
|
|
||
| await fastImageSequence.ready(); | ||
|
|
||
| fastImageSequence.tick((dt) => { | ||
| if (fastImageSequence.playing) { | ||
| progress.value = fastImageSequence.progress; | ||
| } | ||
| }); | ||
|
|
||
| prevButton.addEventListener('click', () => { | ||
| fastImageSequence.play(-30); | ||
| }); | ||
| nextButton.addEventListener('click', () => { | ||
| fastImageSequence.play(30); | ||
| }); | ||
| progress.addEventListener('mousedown', (e) => { | ||
| fastImageSequence.stop(); | ||
| }); | ||
| progress.addEventListener('input', () => { | ||
| if (fastImageSequence.paused) { | ||
| fastImageSequence.progress = progress.value; | ||
| } | ||
| }); | ||
|
|
||
| fastImageSequence.play(30); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -51,8 +51,5 @@ | |
| }, | ||
| "engines": { | ||
| "node": ">=16.0.0" | ||
| }, | ||
| "dependencies": { | ||
| "@mediamonks/fast-image-sequence": "^0.6.4" | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import ImageElement from "./ImageElement.js"; | ||
| import {getImageFetchWorker, releaseImageFetchWorker} from "./ImageFetch.js"; | ||
| import {loadImage} from "./DownloadFile.js"; | ||
| import ImageSource from "./ImageSource.js"; | ||
|
|
||
| export default class ImageSourceFetch extends ImageSource { | ||
| public override getImageURL(index: number): string | undefined { | ||
| return this.options.imageURL ? new URL(this.options.imageURL(index), window.location.href).href : undefined; | ||
| } | ||
|
|
||
| public override async fetchImage(imageElement: ImageElement) { | ||
| return new Promise<ImageBitmap | HTMLImageElement>((resolve, reject) => { | ||
| if (imageElement.imageURL) { | ||
| imageElement.loading = true; | ||
|
|
||
| const loadingDone = (image: ImageBitmap | HTMLImageElement) => { | ||
| if (imageElement.loading) { | ||
| imageElement.image = image; | ||
| resolve(image); | ||
| } | ||
| }; | ||
|
|
||
| const loadingError = (e: any) => { | ||
| imageElement.reset(); | ||
| reject(e); | ||
| }; | ||
|
|
||
| if (this.options.useWorker) { | ||
| const worker = getImageFetchWorker(); | ||
| worker.load(this.index, imageElement.imageURL).then((imageBitmap) => { | ||
| loadingDone(imageBitmap); | ||
| releaseImageFetchWorker(worker); | ||
| }).catch(e => loadingError(e)); | ||
| } else { | ||
| const imgElement = new Image(); | ||
| loadImage(imgElement, imageElement.imageURL).then(() => { | ||
| loadingDone(imgElement); | ||
| }).catch(e => loadingError(e)); | ||
| } | ||
| } else { | ||
| reject('Image url not set'); | ||
| } | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters