Skip to content

Commit

Permalink
image command consistency fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@3vorp
3vorp committed Oct 16, 2023
1 parent c09a38e commit 202137d
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 37 deletions.
30 changes: 15 additions & 15 deletions src/helpers/images/animate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,22 +59,22 @@ export async function animate(origin: ImageSource, mcmeta: MCMETA): Promise<Buff

// initialize gif encoder and final canvas
const canvas = createCanvas(mcmeta.animation.width, mcmeta.animation.height);
const context = canvas.getContext("2d");
context.imageSmoothingEnabled = false;
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
const encoder = new GIFEncoder(mcmeta.animation.width, mcmeta.animation.height);
encoder.start();
encoder.setTransparent(true);
context.globalCompositeOperation = "copy";
ctx.globalCompositeOperation = "copy";

if (mcmeta.animation.interpolate) {
for (let i = 0; i < frames.length; ++i) {
for (let y = 1; y <= frametime; ++y) {
context.clearRect(0, 0, mcmeta.animation.width, mcmeta.animation.height);
context.globalAlpha = 1;
context.globalCompositeOperation = "copy";
ctx.clearRect(0, 0, mcmeta.animation.width, mcmeta.animation.height);
ctx.globalAlpha = 1;
ctx.globalCompositeOperation = "copy";

// frame i (always 100% opacity)
context.drawImage(
ctx.drawImage(
baseCanvas, // image
0,
mcmeta.animation.height * frames[i].index, // sx, sy
Expand All @@ -86,11 +86,11 @@ export async function animate(origin: ImageSource, mcmeta: MCMETA): Promise<Buff
mcmeta.animation.height, // dWidth, dHeight
);

context.globalAlpha = ((100 / frametime) * y) / 100;
context.globalCompositeOperation = "source-atop";
ctx.globalAlpha = ((100 / frametime) * y) / 100;
ctx.globalCompositeOperation = "source-atop";

// frame i + 1 (transition)
context.drawImage(
ctx.drawImage(
baseCanvas, // image
0,
mcmeta.animation.height * frames[(i + 1) % frames.length].index, // sx, sy
Expand All @@ -101,16 +101,16 @@ export async function animate(origin: ImageSource, mcmeta: MCMETA): Promise<Buff
mcmeta.animation.width,
mcmeta.animation.height, // dWidth, dHeight
);
encoder.addFrame(context);
encoder.addFrame(ctx);
}
}
} else {
for (let i = 0; i < frames.length; ++i) {
context.clearRect(0, 0, mcmeta.animation.width, mcmeta.animation.height);
context.globalAlpha = 1;
ctx.clearRect(0, 0, mcmeta.animation.width, mcmeta.animation.height);
ctx.globalAlpha = 1;

// see: https://mdn.dev/archives/media/attachments/2012/07/09/225/46ffb06174df7c077c89ff3055e6e524/Canvas_drawimage.jpg
context.drawImage(
ctx.drawImage(
baseCanvas, // image
0,
mcmeta.animation.height * frames[i].index, // sx, sy
Expand All @@ -123,7 +123,7 @@ export async function animate(origin: ImageSource, mcmeta: MCMETA): Promise<Buff
);

encoder.setDelay(50 * frames[i].duration);
encoder.addFrame(context);
encoder.addFrame(ctx);
}
}

Expand Down
16 changes: 8 additions & 8 deletions src/helpers/images/multiply.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,17 +50,17 @@ export const mcColorsOptions: { name: string; value: string }[] = Object.keys(mc
export async function multiply(origin: ImageSource, color: string) {
const imageToDraw = await loadImage(origin);
const canvas = createCanvas(imageToDraw.width, imageToDraw.height);
const context = canvas.getContext("2d");
const ctx = canvas.getContext("2d");

context.imageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

context.drawImage(imageToDraw, 0, 0, imageToDraw.width, imageToDraw.height);
context.globalCompositeOperation = "multiply";
ctx.drawImage(imageToDraw, 0, 0, imageToDraw.width, imageToDraw.height);
ctx.globalCompositeOperation = "multiply";

context.fillStyle = color;
context.fillRect(0, 0, imageToDraw.width, imageToDraw.height);
ctx.fillStyle = color;
ctx.fillRect(0, 0, imageToDraw.width, imageToDraw.height);

const data = context.getImageData(0, 0, imageToDraw.width, imageToDraw.height);
const data = ctx.getImageData(0, 0, imageToDraw.width, imageToDraw.height);

for (let i = 0; i < data.data.length; i += 4) {
const r = data.data[i];
Expand All @@ -73,7 +73,7 @@ export async function multiply(origin: ImageSource, color: string) {
}
}

context.putImageData(data, 0, 0);
ctx.putImageData(data, 0, 0);

return canvas.toBuffer("image/png");
}
Expand Down
21 changes: 10 additions & 11 deletions src/helpers/images/palette.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import {
StringSelectMenuInteraction,
Message,
} from "@client";
import { Canvas, createCanvas, loadImage } from "@napi-rs/canvas";
import { createCanvas, loadImage } from "@napi-rs/canvas";
import { AttachmentBuilder } from "discord.js";
import ColorManager from "@images/colors";
import { ImageSource } from "@helpers/getImage";
import { colors } from "@utility/colors";
import warnUser from "@helpers/warnUser";

const COOLORS_URL = "https://coolors.co/";
Expand Down Expand Up @@ -44,12 +43,12 @@ export async function palette(origin: ImageSource) {
const imageToDraw = await loadImage(origin);
// 1048576px is the same size as a magnified image
if (imageToDraw.width * imageToDraw.height > 1048576) return { image: null, embed: null };
const canvas: Canvas = createCanvas(imageToDraw.width, imageToDraw.height);
const context = canvas.getContext("2d");
context.drawImage(imageToDraw, 0, 0);
const canvas = createCanvas(imageToDraw.width, imageToDraw.height);
const ctx = canvas.getContext("2d");
ctx.drawImage(imageToDraw, 0, 0);

const allColors: AllColors = {};
const imageData = context.getImageData(0, 0, imageToDraw.width, imageToDraw.height).data;
const imageData = ctx.getImageData(0, 0, imageToDraw.width, imageToDraw.height).data;

for (let x = 0; x < imageToDraw.width; ++x) {
for (let y = 0; y < imageToDraw.height; ++y) {
Expand All @@ -63,7 +62,7 @@ export async function palette(origin: ImageSource) {
if (!a) continue;
let hex = new ColorManager({ rgb: { r, g, b } }).toHEX().value;

if (!(hex in allColors)) allColors[hex] = { hex: hex, opacity: [], rgb: [r, g, b], count: 0 };
if (!(hex in allColors)) allColors[hex] = { hex, opacity: [], rgb: [r, g, b], count: 0 };

++allColors[hex].count;
allColors[hex].opacity.push(a);
Expand Down Expand Up @@ -166,12 +165,12 @@ export async function palette(origin: ImageSource) {
});

const colorCanvas = createCanvas(bandWidth * allColorsSorted.length, GRADIENT_HEIGHT);
const ctx = colorCanvas.getContext("2d");
const colorCtx = colorCanvas.getContext("2d");

allColorsSorted.forEach((color, index) => {
ctx.fillStyle = `#${color.hex}`;
ctx.globalAlpha = color.opacity.reduce((acc, val, i) => (acc * i + val) / (i + 1)); // average alpha
ctx.fillRect(bandWidth * index, 0, bandWidth, GRADIENT_HEIGHT);
colorCtx.fillStyle = `#${color.hex}`;
colorCtx.globalAlpha = color.opacity.reduce((acc, val, i) => (acc * i + val) / (i + 1)); // average alpha
colorCtx.fillRect(bandWidth * index, 0, bandWidth, GRADIENT_HEIGHT);
});

return { image: colorCanvas.toBuffer("image/png"), embed };
Expand Down
6 changes: 3 additions & 3 deletions src/helpers/images/tile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ export async function tile(origin: ImageSource, options: TileOptions = {}): Prom

/**
* Follows this pattern:
* x x x x x x . x . . x . . . .
* x x x -> x . x -> x x x -> . x . OR x x x
* x x x x x x . x . . x . . . .
* x x x x x x . x . . x . . . .
* x x x -> x . x -> x x x -> . x . OR x x x
* x x x x x x . x . . x . . . .
*/

if (options?.random == "rotation") {
Expand Down

0 comments on commit 202137d

Please sign in to comment.