@tsparticles/shape-image 3.3.0 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/browser/GifUtils/Enums/DisposalMethod.js +11 -1
- package/browser/GifUtils/Types/GIFDataHeaders.js +10 -1
- package/browser/GifUtils/Utils.js +19 -17
- package/browser/ImageDrawer.js +1 -0
- package/browser/ImagePreloader.js +1 -1
- package/browser/Utils.js +1 -1
- package/browser/index.js +4 -3
- package/cjs/GifUtils/Enums/DisposalMethod.js +12 -0
- package/cjs/GifUtils/Types/GIFDataHeaders.js +11 -0
- package/cjs/GifUtils/Utils.js +24 -23
- package/cjs/ImageDrawer.js +1 -0
- package/cjs/ImagePreloader.js +1 -1
- package/cjs/Utils.js +4 -5
- package/cjs/index.js +7 -7
- package/esm/GifUtils/Enums/DisposalMethod.js +11 -1
- package/esm/GifUtils/Types/GIFDataHeaders.js +10 -1
- package/esm/GifUtils/Utils.js +19 -17
- package/esm/ImageDrawer.js +1 -0
- package/esm/ImagePreloader.js +1 -1
- package/esm/Utils.js +1 -1
- package/esm/index.js +4 -3
- package/package.json +2 -2
- package/report.html +1 -1
- package/tsparticles.shape.image.js +82 -200
- package/tsparticles.shape.image.min.js +1 -1
- package/tsparticles.shape.image.min.js.LICENSE.txt +1 -1
- package/types/GifUtils/Enums/DisposalMethod.d.ts +1 -1
- package/types/GifUtils/Types/GIFDataHeaders.d.ts +1 -1
- package/types/GifUtils/Utils.d.ts +1 -1
- package/types/ImageDrawer.d.ts +1 -0
- package/umd/GifUtils/Enums/DisposalMethod.js +12 -0
- package/umd/GifUtils/Types/GIFDataHeaders.js +11 -0
- package/umd/GifUtils/Utils.js +25 -48
- package/umd/ImageDrawer.js +1 -0
- package/umd/ImagePreloader.js +1 -1
- package/umd/Utils.js +4 -5
- package/umd/index.js +8 -32
- package/329.min.js +0 -2
- package/329.min.js.LICENSE.txt +0 -1
- package/33.min.js +0 -2
- package/33.min.js.LICENSE.txt +0 -1
- package/715.min.js +0 -2
- package/715.min.js.LICENSE.txt +0 -1
- package/dist_browser_GifUtils_Utils_js.js +0 -50
- package/dist_browser_ImageDrawer_js.js +0 -30
- package/dist_browser_ImagePreloader_js.js +0 -40
|
@@ -1 +1,11 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var DisposalMethod;
|
|
2
|
+
(function (DisposalMethod) {
|
|
3
|
+
DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
|
|
4
|
+
DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
|
|
5
|
+
DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
|
|
6
|
+
DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
|
|
7
|
+
DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
|
|
8
|
+
DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
|
|
9
|
+
DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
|
|
10
|
+
DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
|
|
11
|
+
})(DisposalMethod || (DisposalMethod = {}));
|
|
@@ -1 +1,10 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var GIFDataHeaders;
|
|
2
|
+
(function (GIFDataHeaders) {
|
|
3
|
+
GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
|
|
4
|
+
GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
|
|
5
|
+
GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
|
|
6
|
+
GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
|
|
7
|
+
GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
|
|
8
|
+
GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
|
|
9
|
+
GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
|
|
10
|
+
})(GIFDataHeaders || (GIFDataHeaders = {}));
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import { loadImage } from "../Utils.js";
|
|
1
2
|
import { InterlaceOffsets, InterlaceSteps } from "./Constants.js";
|
|
2
3
|
import { ByteStream } from "./ByteStream.js";
|
|
4
|
+
import { DisposalMethod } from "./Enums/DisposalMethod.js";
|
|
5
|
+
import { GIFDataHeaders } from "./Types/GIFDataHeaders.js";
|
|
3
6
|
const origin = {
|
|
4
7
|
x: 0,
|
|
5
8
|
y: 0,
|
|
@@ -18,7 +21,7 @@ function parseColorTable(byteStream, count) {
|
|
|
18
21
|
}
|
|
19
22
|
function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
|
|
20
23
|
switch (byteStream.nextByte()) {
|
|
21
|
-
case
|
|
24
|
+
case GIFDataHeaders.GraphicsControlExtension: {
|
|
22
25
|
const frame = gif.frames[getFrameIndex(false)];
|
|
23
26
|
byteStream.pos++;
|
|
24
27
|
const packedByte = byteStream.nextByte();
|
|
@@ -34,7 +37,7 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
34
37
|
byteStream.pos++;
|
|
35
38
|
break;
|
|
36
39
|
}
|
|
37
|
-
case
|
|
40
|
+
case GIFDataHeaders.ApplicationExtension: {
|
|
38
41
|
byteStream.pos++;
|
|
39
42
|
const applicationExtension = {
|
|
40
43
|
identifier: byteStream.getString(8),
|
|
@@ -44,11 +47,11 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
44
47
|
gif.applicationExtensions.push(applicationExtension);
|
|
45
48
|
break;
|
|
46
49
|
}
|
|
47
|
-
case
|
|
50
|
+
case GIFDataHeaders.CommentExtension: {
|
|
48
51
|
gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
|
|
49
52
|
break;
|
|
50
53
|
}
|
|
51
|
-
case
|
|
54
|
+
case GIFDataHeaders.PlainTextExtension: {
|
|
52
55
|
if (gif.globalColorTable.length === 0) {
|
|
53
56
|
throw new EvalError("plain text extension without global color table");
|
|
54
57
|
}
|
|
@@ -201,12 +204,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
|
|
|
201
204
|
}
|
|
202
205
|
async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
|
|
203
206
|
switch (byteStream.nextByte()) {
|
|
204
|
-
case
|
|
207
|
+
case GIFDataHeaders.EndOfFile:
|
|
205
208
|
return true;
|
|
206
|
-
case
|
|
209
|
+
case GIFDataHeaders.Image:
|
|
207
210
|
await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
|
|
208
211
|
break;
|
|
209
|
-
case
|
|
212
|
+
case GIFDataHeaders.Extension:
|
|
210
213
|
parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
|
|
211
214
|
break;
|
|
212
215
|
default:
|
|
@@ -301,7 +304,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
|
|
|
301
304
|
top: 0,
|
|
302
305
|
width: 0,
|
|
303
306
|
height: 0,
|
|
304
|
-
disposalMethod:
|
|
307
|
+
disposalMethod: DisposalMethod.Replace,
|
|
305
308
|
image: new ImageData(1, 1, { colorSpace: "srgb" }),
|
|
306
309
|
plainTextData: null,
|
|
307
310
|
userInputDelayFlag: false,
|
|
@@ -358,20 +361,20 @@ export function drawGif(data) {
|
|
|
358
361
|
}
|
|
359
362
|
context.scale(radius / image.gifData.width, radius / image.gifData.height);
|
|
360
363
|
switch (frame.disposalMethod) {
|
|
361
|
-
case
|
|
362
|
-
case
|
|
363
|
-
case
|
|
364
|
-
case
|
|
365
|
-
case
|
|
364
|
+
case DisposalMethod.UndefinedA:
|
|
365
|
+
case DisposalMethod.UndefinedB:
|
|
366
|
+
case DisposalMethod.UndefinedC:
|
|
367
|
+
case DisposalMethod.UndefinedD:
|
|
368
|
+
case DisposalMethod.Replace:
|
|
366
369
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
367
370
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
368
371
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
369
372
|
break;
|
|
370
|
-
case
|
|
373
|
+
case DisposalMethod.Combine:
|
|
371
374
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
372
375
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
373
376
|
break;
|
|
374
|
-
case
|
|
377
|
+
case DisposalMethod.RestoreBackground:
|
|
375
378
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
376
379
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
377
380
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
@@ -382,7 +385,7 @@ export function drawGif(data) {
|
|
|
382
385
|
offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
|
|
383
386
|
}
|
|
384
387
|
break;
|
|
385
|
-
case
|
|
388
|
+
case DisposalMethod.RestorePrevious:
|
|
386
389
|
{
|
|
387
390
|
const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
388
391
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
@@ -408,7 +411,6 @@ export function drawGif(data) {
|
|
|
408
411
|
}
|
|
409
412
|
export async function loadGifImage(image) {
|
|
410
413
|
if (image.type !== "gif") {
|
|
411
|
-
const { loadImage } = await import("../Utils.js");
|
|
412
414
|
await loadImage(image);
|
|
413
415
|
return;
|
|
414
416
|
}
|
package/browser/ImageDrawer.js
CHANGED
|
@@ -4,6 +4,7 @@ import { drawGif } from "./GifUtils/Utils.js";
|
|
|
4
4
|
const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
|
|
5
5
|
export class ImageDrawer {
|
|
6
6
|
constructor(engine) {
|
|
7
|
+
this.validTypes = ["image", "images"];
|
|
7
8
|
this.loadImageShape = async (imageShape) => {
|
|
8
9
|
if (!this._engine.loadImage) {
|
|
9
10
|
throw new Error(`${errorPrefix} image shape not initialized`);
|
|
@@ -17,7 +17,7 @@ export class ImagePreloaderPlugin {
|
|
|
17
17
|
}
|
|
18
18
|
const preloadOptions = options.preload;
|
|
19
19
|
for (const item of source.preload) {
|
|
20
|
-
const existing = preloadOptions.find(
|
|
20
|
+
const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
|
|
21
21
|
if (existing) {
|
|
22
22
|
existing.load(item);
|
|
23
23
|
}
|
package/browser/Utils.js
CHANGED
|
@@ -61,7 +61,7 @@ export function replaceImageColor(image, imageData, color, particle) {
|
|
|
61
61
|
replaceColor: imageData.replaceColor,
|
|
62
62
|
source: imageData.src,
|
|
63
63
|
};
|
|
64
|
-
return new Promise(
|
|
64
|
+
return new Promise(resolve => {
|
|
65
65
|
const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
|
|
66
66
|
img.addEventListener("load", () => {
|
|
67
67
|
imageRes.loaded = true;
|
package/browser/index.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { downloadSvgImage, loadImage } from "./Utils.js";
|
|
2
|
+
import { ImageDrawer } from "./ImageDrawer.js";
|
|
3
|
+
import { ImagePreloaderPlugin } from "./ImagePreloader.js";
|
|
2
4
|
import { errorPrefix } from "@tsparticles/engine";
|
|
5
|
+
import { loadGifImage } from "./GifUtils/Utils.js";
|
|
3
6
|
const extLength = 3;
|
|
4
7
|
function addLoadImageToEngine(engine) {
|
|
5
8
|
if (engine.loadImage) {
|
|
@@ -29,7 +32,6 @@ function addLoadImageToEngine(engine) {
|
|
|
29
32
|
engine.images.push(image);
|
|
30
33
|
let imageFunc;
|
|
31
34
|
if (data.gif) {
|
|
32
|
-
const { loadGifImage } = await import("./GifUtils/Utils.js");
|
|
33
35
|
imageFunc = loadGifImage;
|
|
34
36
|
}
|
|
35
37
|
else {
|
|
@@ -44,8 +46,7 @@ function addLoadImageToEngine(engine) {
|
|
|
44
46
|
}
|
|
45
47
|
export async function loadImageShape(engine, refresh = true) {
|
|
46
48
|
addLoadImageToEngine(engine);
|
|
47
|
-
const { ImagePreloaderPlugin } = await import("./ImagePreloader.js"), { ImageDrawer } = await import("./ImageDrawer.js");
|
|
48
49
|
const preloader = new ImagePreloaderPlugin(engine);
|
|
49
50
|
await engine.addPlugin(preloader, refresh);
|
|
50
|
-
await engine.addShape(
|
|
51
|
+
await engine.addShape(new ImageDrawer(engine), refresh);
|
|
51
52
|
}
|
|
@@ -1,2 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DisposalMethod = void 0;
|
|
4
|
+
var DisposalMethod;
|
|
5
|
+
(function (DisposalMethod) {
|
|
6
|
+
DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
|
|
7
|
+
DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
|
|
8
|
+
DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
|
|
9
|
+
DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
|
|
10
|
+
DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
|
|
11
|
+
DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
|
|
12
|
+
DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
|
|
13
|
+
DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
|
|
14
|
+
})(DisposalMethod || (exports.DisposalMethod = DisposalMethod = {}));
|
|
@@ -1,2 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.GIFDataHeaders = void 0;
|
|
4
|
+
var GIFDataHeaders;
|
|
5
|
+
(function (GIFDataHeaders) {
|
|
6
|
+
GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
|
|
7
|
+
GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
|
|
8
|
+
GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
|
|
9
|
+
GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
|
|
10
|
+
GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
|
|
11
|
+
GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
|
|
12
|
+
GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
|
|
13
|
+
})(GIFDataHeaders || (exports.GIFDataHeaders = GIFDataHeaders = {}));
|
package/cjs/GifUtils/Utils.js
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.getGIFLoopAmount = getGIFLoopAmount;
|
|
4
|
+
exports.decodeGIF = decodeGIF;
|
|
5
|
+
exports.drawGif = drawGif;
|
|
6
|
+
exports.loadGifImage = loadGifImage;
|
|
7
|
+
const Utils_js_1 = require("../Utils.js");
|
|
4
8
|
const Constants_js_1 = require("./Constants.js");
|
|
5
9
|
const ByteStream_js_1 = require("./ByteStream.js");
|
|
10
|
+
const DisposalMethod_js_1 = require("./Enums/DisposalMethod.js");
|
|
11
|
+
const GIFDataHeaders_js_1 = require("./Types/GIFDataHeaders.js");
|
|
6
12
|
const origin = {
|
|
7
13
|
x: 0,
|
|
8
14
|
y: 0,
|
|
@@ -21,7 +27,7 @@ function parseColorTable(byteStream, count) {
|
|
|
21
27
|
}
|
|
22
28
|
function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
|
|
23
29
|
switch (byteStream.nextByte()) {
|
|
24
|
-
case
|
|
30
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.GraphicsControlExtension: {
|
|
25
31
|
const frame = gif.frames[getFrameIndex(false)];
|
|
26
32
|
byteStream.pos++;
|
|
27
33
|
const packedByte = byteStream.nextByte();
|
|
@@ -37,7 +43,7 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
37
43
|
byteStream.pos++;
|
|
38
44
|
break;
|
|
39
45
|
}
|
|
40
|
-
case
|
|
46
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.ApplicationExtension: {
|
|
41
47
|
byteStream.pos++;
|
|
42
48
|
const applicationExtension = {
|
|
43
49
|
identifier: byteStream.getString(8),
|
|
@@ -47,11 +53,11 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
47
53
|
gif.applicationExtensions.push(applicationExtension);
|
|
48
54
|
break;
|
|
49
55
|
}
|
|
50
|
-
case
|
|
56
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.CommentExtension: {
|
|
51
57
|
gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
|
|
52
58
|
break;
|
|
53
59
|
}
|
|
54
|
-
case
|
|
60
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.PlainTextExtension: {
|
|
55
61
|
if (gif.globalColorTable.length === 0) {
|
|
56
62
|
throw new EvalError("plain text extension without global color table");
|
|
57
63
|
}
|
|
@@ -204,12 +210,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
|
|
|
204
210
|
}
|
|
205
211
|
async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
|
|
206
212
|
switch (byteStream.nextByte()) {
|
|
207
|
-
case
|
|
213
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.EndOfFile:
|
|
208
214
|
return true;
|
|
209
|
-
case
|
|
215
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.Image:
|
|
210
216
|
await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
|
|
211
217
|
break;
|
|
212
|
-
case
|
|
218
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.Extension:
|
|
213
219
|
parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
|
|
214
220
|
break;
|
|
215
221
|
default:
|
|
@@ -226,7 +232,6 @@ function getGIFLoopAmount(gif) {
|
|
|
226
232
|
}
|
|
227
233
|
return NaN;
|
|
228
234
|
}
|
|
229
|
-
exports.getGIFLoopAmount = getGIFLoopAmount;
|
|
230
235
|
async function decodeGIF(gifURL, progressCallback, avgAlpha) {
|
|
231
236
|
if (!avgAlpha)
|
|
232
237
|
avgAlpha = false;
|
|
@@ -305,7 +310,7 @@ async function decodeGIF(gifURL, progressCallback, avgAlpha) {
|
|
|
305
310
|
top: 0,
|
|
306
311
|
width: 0,
|
|
307
312
|
height: 0,
|
|
308
|
-
disposalMethod:
|
|
313
|
+
disposalMethod: DisposalMethod_js_1.DisposalMethod.Replace,
|
|
309
314
|
image: new ImageData(1, 1, { colorSpace: "srgb" }),
|
|
310
315
|
plainTextData: null,
|
|
311
316
|
userInputDelayFlag: false,
|
|
@@ -337,7 +342,6 @@ async function decodeGIF(gifURL, progressCallback, avgAlpha) {
|
|
|
337
342
|
throw error;
|
|
338
343
|
}
|
|
339
344
|
}
|
|
340
|
-
exports.decodeGIF = decodeGIF;
|
|
341
345
|
function drawGif(data) {
|
|
342
346
|
const { context, radius, particle, delta } = data, image = particle.image;
|
|
343
347
|
if (!image?.gifData || !image.gif) {
|
|
@@ -363,20 +367,20 @@ function drawGif(data) {
|
|
|
363
367
|
}
|
|
364
368
|
context.scale(radius / image.gifData.width, radius / image.gifData.height);
|
|
365
369
|
switch (frame.disposalMethod) {
|
|
366
|
-
case
|
|
367
|
-
case
|
|
368
|
-
case
|
|
369
|
-
case
|
|
370
|
-
case
|
|
370
|
+
case DisposalMethod_js_1.DisposalMethod.UndefinedA:
|
|
371
|
+
case DisposalMethod_js_1.DisposalMethod.UndefinedB:
|
|
372
|
+
case DisposalMethod_js_1.DisposalMethod.UndefinedC:
|
|
373
|
+
case DisposalMethod_js_1.DisposalMethod.UndefinedD:
|
|
374
|
+
case DisposalMethod_js_1.DisposalMethod.Replace:
|
|
371
375
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
372
376
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
373
377
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
374
378
|
break;
|
|
375
|
-
case
|
|
379
|
+
case DisposalMethod_js_1.DisposalMethod.Combine:
|
|
376
380
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
377
381
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
378
382
|
break;
|
|
379
|
-
case
|
|
383
|
+
case DisposalMethod_js_1.DisposalMethod.RestoreBackground:
|
|
380
384
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
381
385
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
382
386
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
@@ -387,7 +391,7 @@ function drawGif(data) {
|
|
|
387
391
|
offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
|
|
388
392
|
}
|
|
389
393
|
break;
|
|
390
|
-
case
|
|
394
|
+
case DisposalMethod_js_1.DisposalMethod.RestorePrevious:
|
|
391
395
|
{
|
|
392
396
|
const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
393
397
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
@@ -411,11 +415,9 @@ function drawGif(data) {
|
|
|
411
415
|
}
|
|
412
416
|
context.scale(image.gifData.width / radius, image.gifData.height / radius);
|
|
413
417
|
}
|
|
414
|
-
exports.drawGif = drawGif;
|
|
415
418
|
async function loadGifImage(image) {
|
|
416
419
|
if (image.type !== "gif") {
|
|
417
|
-
|
|
418
|
-
await loadImage(image);
|
|
420
|
+
await (0, Utils_js_1.loadImage)(image);
|
|
419
421
|
return;
|
|
420
422
|
}
|
|
421
423
|
image.loading = true;
|
|
@@ -431,4 +433,3 @@ async function loadGifImage(image) {
|
|
|
431
433
|
}
|
|
432
434
|
image.loading = false;
|
|
433
435
|
}
|
|
434
|
-
exports.loadGifImage = loadGifImage;
|
package/cjs/ImageDrawer.js
CHANGED
|
@@ -7,6 +7,7 @@ const Utils_js_2 = require("./GifUtils/Utils.js");
|
|
|
7
7
|
const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
|
|
8
8
|
class ImageDrawer {
|
|
9
9
|
constructor(engine) {
|
|
10
|
+
this.validTypes = ["image", "images"];
|
|
10
11
|
this.loadImageShape = async (imageShape) => {
|
|
11
12
|
if (!this._engine.loadImage) {
|
|
12
13
|
throw new Error(`${engine_1.errorPrefix} image shape not initialized`);
|
package/cjs/ImagePreloader.js
CHANGED
|
@@ -20,7 +20,7 @@ class ImagePreloaderPlugin {
|
|
|
20
20
|
}
|
|
21
21
|
const preloadOptions = options.preload;
|
|
22
22
|
for (const item of source.preload) {
|
|
23
|
-
const existing = preloadOptions.find(
|
|
23
|
+
const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
|
|
24
24
|
if (existing) {
|
|
25
25
|
existing.load(item);
|
|
26
26
|
}
|
package/cjs/Utils.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.loadImage = loadImage;
|
|
4
|
+
exports.downloadSvgImage = downloadSvgImage;
|
|
5
|
+
exports.replaceImageColor = replaceImageColor;
|
|
4
6
|
const engine_1 = require("@tsparticles/engine");
|
|
5
7
|
const stringStart = 0, defaultOpacity = 1;
|
|
6
8
|
const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
|
|
@@ -35,7 +37,6 @@ async function loadImage(image) {
|
|
|
35
37
|
img.src = image.source;
|
|
36
38
|
});
|
|
37
39
|
}
|
|
38
|
-
exports.loadImage = loadImage;
|
|
39
40
|
async function downloadSvgImage(image) {
|
|
40
41
|
if (image.type !== "svg") {
|
|
41
42
|
await loadImage(image);
|
|
@@ -52,7 +53,6 @@ async function downloadSvgImage(image) {
|
|
|
52
53
|
}
|
|
53
54
|
image.loading = false;
|
|
54
55
|
}
|
|
55
|
-
exports.downloadSvgImage = downloadSvgImage;
|
|
56
56
|
function replaceImageColor(image, imageData, color, particle) {
|
|
57
57
|
const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity), imageRes = {
|
|
58
58
|
color,
|
|
@@ -66,7 +66,7 @@ function replaceImageColor(image, imageData, color, particle) {
|
|
|
66
66
|
replaceColor: imageData.replaceColor,
|
|
67
67
|
source: imageData.src,
|
|
68
68
|
};
|
|
69
|
-
return new Promise(
|
|
69
|
+
return new Promise(resolve => {
|
|
70
70
|
const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
|
|
71
71
|
img.addEventListener("load", () => {
|
|
72
72
|
imageRes.loaded = true;
|
|
@@ -90,4 +90,3 @@ function replaceImageColor(image, imageData, color, particle) {
|
|
|
90
90
|
img.src = url;
|
|
91
91
|
});
|
|
92
92
|
}
|
|
93
|
-
exports.replaceImageColor = replaceImageColor;
|
package/cjs/index.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.loadImageShape =
|
|
3
|
+
exports.loadImageShape = loadImageShape;
|
|
4
4
|
const Utils_js_1 = require("./Utils.js");
|
|
5
|
+
const ImageDrawer_js_1 = require("./ImageDrawer.js");
|
|
6
|
+
const ImagePreloader_js_1 = require("./ImagePreloader.js");
|
|
5
7
|
const engine_1 = require("@tsparticles/engine");
|
|
8
|
+
const Utils_js_2 = require("./GifUtils/Utils.js");
|
|
6
9
|
const extLength = 3;
|
|
7
10
|
function addLoadImageToEngine(engine) {
|
|
8
11
|
if (engine.loadImage) {
|
|
@@ -32,8 +35,7 @@ function addLoadImageToEngine(engine) {
|
|
|
32
35
|
engine.images.push(image);
|
|
33
36
|
let imageFunc;
|
|
34
37
|
if (data.gif) {
|
|
35
|
-
|
|
36
|
-
imageFunc = loadGifImage;
|
|
38
|
+
imageFunc = Utils_js_2.loadGifImage;
|
|
37
39
|
}
|
|
38
40
|
else {
|
|
39
41
|
imageFunc = data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
|
|
@@ -47,9 +49,7 @@ function addLoadImageToEngine(engine) {
|
|
|
47
49
|
}
|
|
48
50
|
async function loadImageShape(engine, refresh = true) {
|
|
49
51
|
addLoadImageToEngine(engine);
|
|
50
|
-
const
|
|
51
|
-
const preloader = new ImagePreloaderPlugin(engine);
|
|
52
|
+
const preloader = new ImagePreloader_js_1.ImagePreloaderPlugin(engine);
|
|
52
53
|
await engine.addPlugin(preloader, refresh);
|
|
53
|
-
await engine.addShape(
|
|
54
|
+
await engine.addShape(new ImageDrawer_js_1.ImageDrawer(engine), refresh);
|
|
54
55
|
}
|
|
55
|
-
exports.loadImageShape = loadImageShape;
|
|
@@ -1 +1,11 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var DisposalMethod;
|
|
2
|
+
(function (DisposalMethod) {
|
|
3
|
+
DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
|
|
4
|
+
DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
|
|
5
|
+
DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
|
|
6
|
+
DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
|
|
7
|
+
DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
|
|
8
|
+
DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
|
|
9
|
+
DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
|
|
10
|
+
DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
|
|
11
|
+
})(DisposalMethod || (DisposalMethod = {}));
|
|
@@ -1 +1,10 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var GIFDataHeaders;
|
|
2
|
+
(function (GIFDataHeaders) {
|
|
3
|
+
GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
|
|
4
|
+
GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
|
|
5
|
+
GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
|
|
6
|
+
GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
|
|
7
|
+
GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
|
|
8
|
+
GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
|
|
9
|
+
GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
|
|
10
|
+
})(GIFDataHeaders || (GIFDataHeaders = {}));
|
package/esm/GifUtils/Utils.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import { loadImage } from "../Utils.js";
|
|
1
2
|
import { InterlaceOffsets, InterlaceSteps } from "./Constants.js";
|
|
2
3
|
import { ByteStream } from "./ByteStream.js";
|
|
4
|
+
import { DisposalMethod } from "./Enums/DisposalMethod.js";
|
|
5
|
+
import { GIFDataHeaders } from "./Types/GIFDataHeaders.js";
|
|
3
6
|
const origin = {
|
|
4
7
|
x: 0,
|
|
5
8
|
y: 0,
|
|
@@ -18,7 +21,7 @@ function parseColorTable(byteStream, count) {
|
|
|
18
21
|
}
|
|
19
22
|
function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
|
|
20
23
|
switch (byteStream.nextByte()) {
|
|
21
|
-
case
|
|
24
|
+
case GIFDataHeaders.GraphicsControlExtension: {
|
|
22
25
|
const frame = gif.frames[getFrameIndex(false)];
|
|
23
26
|
byteStream.pos++;
|
|
24
27
|
const packedByte = byteStream.nextByte();
|
|
@@ -34,7 +37,7 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
34
37
|
byteStream.pos++;
|
|
35
38
|
break;
|
|
36
39
|
}
|
|
37
|
-
case
|
|
40
|
+
case GIFDataHeaders.ApplicationExtension: {
|
|
38
41
|
byteStream.pos++;
|
|
39
42
|
const applicationExtension = {
|
|
40
43
|
identifier: byteStream.getString(8),
|
|
@@ -44,11 +47,11 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
44
47
|
gif.applicationExtensions.push(applicationExtension);
|
|
45
48
|
break;
|
|
46
49
|
}
|
|
47
|
-
case
|
|
50
|
+
case GIFDataHeaders.CommentExtension: {
|
|
48
51
|
gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
|
|
49
52
|
break;
|
|
50
53
|
}
|
|
51
|
-
case
|
|
54
|
+
case GIFDataHeaders.PlainTextExtension: {
|
|
52
55
|
if (gif.globalColorTable.length === 0) {
|
|
53
56
|
throw new EvalError("plain text extension without global color table");
|
|
54
57
|
}
|
|
@@ -201,12 +204,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
|
|
|
201
204
|
}
|
|
202
205
|
async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
|
|
203
206
|
switch (byteStream.nextByte()) {
|
|
204
|
-
case
|
|
207
|
+
case GIFDataHeaders.EndOfFile:
|
|
205
208
|
return true;
|
|
206
|
-
case
|
|
209
|
+
case GIFDataHeaders.Image:
|
|
207
210
|
await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
|
|
208
211
|
break;
|
|
209
|
-
case
|
|
212
|
+
case GIFDataHeaders.Extension:
|
|
210
213
|
parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
|
|
211
214
|
break;
|
|
212
215
|
default:
|
|
@@ -301,7 +304,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
|
|
|
301
304
|
top: 0,
|
|
302
305
|
width: 0,
|
|
303
306
|
height: 0,
|
|
304
|
-
disposalMethod:
|
|
307
|
+
disposalMethod: DisposalMethod.Replace,
|
|
305
308
|
image: new ImageData(1, 1, { colorSpace: "srgb" }),
|
|
306
309
|
plainTextData: null,
|
|
307
310
|
userInputDelayFlag: false,
|
|
@@ -358,20 +361,20 @@ export function drawGif(data) {
|
|
|
358
361
|
}
|
|
359
362
|
context.scale(radius / image.gifData.width, radius / image.gifData.height);
|
|
360
363
|
switch (frame.disposalMethod) {
|
|
361
|
-
case
|
|
362
|
-
case
|
|
363
|
-
case
|
|
364
|
-
case
|
|
365
|
-
case
|
|
364
|
+
case DisposalMethod.UndefinedA:
|
|
365
|
+
case DisposalMethod.UndefinedB:
|
|
366
|
+
case DisposalMethod.UndefinedC:
|
|
367
|
+
case DisposalMethod.UndefinedD:
|
|
368
|
+
case DisposalMethod.Replace:
|
|
366
369
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
367
370
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
368
371
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
369
372
|
break;
|
|
370
|
-
case
|
|
373
|
+
case DisposalMethod.Combine:
|
|
371
374
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
372
375
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
373
376
|
break;
|
|
374
|
-
case
|
|
377
|
+
case DisposalMethod.RestoreBackground:
|
|
375
378
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
376
379
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
377
380
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
@@ -382,7 +385,7 @@ export function drawGif(data) {
|
|
|
382
385
|
offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
|
|
383
386
|
}
|
|
384
387
|
break;
|
|
385
|
-
case
|
|
388
|
+
case DisposalMethod.RestorePrevious:
|
|
386
389
|
{
|
|
387
390
|
const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
388
391
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
@@ -408,7 +411,6 @@ export function drawGif(data) {
|
|
|
408
411
|
}
|
|
409
412
|
export async function loadGifImage(image) {
|
|
410
413
|
if (image.type !== "gif") {
|
|
411
|
-
const { loadImage } = await import("../Utils.js");
|
|
412
414
|
await loadImage(image);
|
|
413
415
|
return;
|
|
414
416
|
}
|
package/esm/ImageDrawer.js
CHANGED
|
@@ -4,6 +4,7 @@ import { drawGif } from "./GifUtils/Utils.js";
|
|
|
4
4
|
const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
|
|
5
5
|
export class ImageDrawer {
|
|
6
6
|
constructor(engine) {
|
|
7
|
+
this.validTypes = ["image", "images"];
|
|
7
8
|
this.loadImageShape = async (imageShape) => {
|
|
8
9
|
if (!this._engine.loadImage) {
|
|
9
10
|
throw new Error(`${errorPrefix} image shape not initialized`);
|
package/esm/ImagePreloader.js
CHANGED
|
@@ -17,7 +17,7 @@ export class ImagePreloaderPlugin {
|
|
|
17
17
|
}
|
|
18
18
|
const preloadOptions = options.preload;
|
|
19
19
|
for (const item of source.preload) {
|
|
20
|
-
const existing = preloadOptions.find(
|
|
20
|
+
const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
|
|
21
21
|
if (existing) {
|
|
22
22
|
existing.load(item);
|
|
23
23
|
}
|
package/esm/Utils.js
CHANGED
|
@@ -61,7 +61,7 @@ export function replaceImageColor(image, imageData, color, particle) {
|
|
|
61
61
|
replaceColor: imageData.replaceColor,
|
|
62
62
|
source: imageData.src,
|
|
63
63
|
};
|
|
64
|
-
return new Promise(
|
|
64
|
+
return new Promise(resolve => {
|
|
65
65
|
const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
|
|
66
66
|
img.addEventListener("load", () => {
|
|
67
67
|
imageRes.loaded = true;
|
package/esm/index.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { downloadSvgImage, loadImage } from "./Utils.js";
|
|
2
|
+
import { ImageDrawer } from "./ImageDrawer.js";
|
|
3
|
+
import { ImagePreloaderPlugin } from "./ImagePreloader.js";
|
|
2
4
|
import { errorPrefix } from "@tsparticles/engine";
|
|
5
|
+
import { loadGifImage } from "./GifUtils/Utils.js";
|
|
3
6
|
const extLength = 3;
|
|
4
7
|
function addLoadImageToEngine(engine) {
|
|
5
8
|
if (engine.loadImage) {
|
|
@@ -29,7 +32,6 @@ function addLoadImageToEngine(engine) {
|
|
|
29
32
|
engine.images.push(image);
|
|
30
33
|
let imageFunc;
|
|
31
34
|
if (data.gif) {
|
|
32
|
-
const { loadGifImage } = await import("./GifUtils/Utils.js");
|
|
33
35
|
imageFunc = loadGifImage;
|
|
34
36
|
}
|
|
35
37
|
else {
|
|
@@ -44,8 +46,7 @@ function addLoadImageToEngine(engine) {
|
|
|
44
46
|
}
|
|
45
47
|
export async function loadImageShape(engine, refresh = true) {
|
|
46
48
|
addLoadImageToEngine(engine);
|
|
47
|
-
const { ImagePreloaderPlugin } = await import("./ImagePreloader.js"), { ImageDrawer } = await import("./ImageDrawer.js");
|
|
48
49
|
const preloader = new ImagePreloaderPlugin(engine);
|
|
49
50
|
await engine.addPlugin(preloader, refresh);
|
|
50
|
-
await engine.addShape(
|
|
51
|
+
await engine.addShape(new ImageDrawer(engine), refresh);
|
|
51
52
|
}
|