alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-25 22:35:43 -03:00
Code Issues Packages Projects Releases Wiki Activity

Use willReadFrequently in 2D canvas contexts

Browse Source 
Updated all calls to getContext('2d') to include the { willReadFrequently: true } option. This change improves performance for frequent pixel read operations, particularly for mask and image processing tasks.
This commit is contained in:
Dariusz L
2025-07-01 07:44:14 +02:00
parent cf10322101
commit 02bac6c624
5 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/Canvas.js
View File

@@ -26,7 +26,7 @@ export class Canvas {
this.node = node; this.node = node;
this.widget = widget; this.widget = widget;
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d'); this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
this.width = 512; this.width = 512;
this.height = 512; this.height = 512;
this.layers = []; this.layers = [];
@@ -683,7 +683,7 @@ export class Canvas {
throw new Error("Old mask editor canvas not found"); throw new Error("Old mask editor canvas not found");
} }
const maskCtx = maskCanvas.getContext('2d'); const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
const maskColor = {r: 255, g: 255, b: 255}; const maskColor = {r: 255, g: 255, b: 255};
const processedMask = await this.processMaskForEditor(maskData, maskCanvas.width, maskCanvas.height, maskColor); const processedMask = await this.processMaskForEditor(maskData, maskCanvas.width, maskCanvas.height, maskColor);
@@ -713,7 +713,7 @@ export class Canvas {
const tempCanvas = document.createElement('canvas'); const tempCanvas = document.createElement('canvas');
tempCanvas.width = targetWidth; tempCanvas.width = targetWidth;
tempCanvas.height = targetHeight; tempCanvas.height = targetHeight;
const tempCtx = tempCanvas.getContext('2d'); const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
tempCtx.clearRect(0, 0, targetWidth, targetHeight); tempCtx.clearRect(0, 0, targetWidth, targetHeight);
@@ -797,7 +797,7 @@ export class Canvas {
const savedCanvas = document.createElement('canvas'); const savedCanvas = document.createElement('canvas');
savedCanvas.width = maskCanvas.width; savedCanvas.width = maskCanvas.width;
savedCanvas.height = maskCanvas.height; savedCanvas.height = maskCanvas.height;
const savedCtx = savedCanvas.getContext('2d'); const savedCtx = savedCanvas.getContext('2d', { willReadFrequently: true });
savedCtx.drawImage(maskCanvas, 0, 0); savedCtx.drawImage(maskCanvas, 0, 0);
return { return {
@@ -893,7 +893,7 @@ export class Canvas {
const tempCanvas = document.createElement('canvas'); const tempCanvas = document.createElement('canvas');
tempCanvas.width = this.width; tempCanvas.width = this.width;
tempCanvas.height = this.height; tempCanvas.height = this.height;
const tempCtx = tempCanvas.getContext('2d'); const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
tempCtx.drawImage(resultImage, 0, 0, this.width, this.height); tempCtx.drawImage(resultImage, 0, 0, this.width, this.height);

12
js/CanvasIO.js
View File

@@ -102,7 +102,7 @@ export class CanvasIO {
const tempMaskCanvas = document.createElement('canvas'); const tempMaskCanvas = document.createElement('canvas');
tempMaskCanvas.width = this.canvas.width; tempMaskCanvas.width = this.canvas.width;
tempMaskCanvas.height = this.canvas.height; tempMaskCanvas.height = this.canvas.height;
const tempMaskCtx = tempMaskCanvas.getContext('2d'); const tempMaskCtx = tempMaskCanvas.getContext('2d', { willReadFrequently: true });
tempMaskCtx.clearRect(0, 0, tempMaskCanvas.width, tempMaskCanvas.height); tempMaskCtx.clearRect(0, 0, tempMaskCanvas.width, tempMaskCanvas.height);
@@ -279,7 +279,7 @@ export class CanvasIO {
const tempMaskCanvas = document.createElement('canvas'); const tempMaskCanvas = document.createElement('canvas');
tempMaskCanvas.width = this.canvas.width; tempMaskCanvas.width = this.canvas.width;
tempMaskCanvas.height = this.canvas.height; tempMaskCanvas.height = this.canvas.height;
const tempMaskCtx = tempMaskCanvas.getContext('2d'); const tempMaskCtx = tempMaskCanvas.getContext('2d', { willReadFrequently: true });
tempMaskCtx.clearRect(0, 0, tempMaskCanvas.width, tempMaskCanvas.height); tempMaskCtx.clearRect(0, 0, tempMaskCanvas.width, tempMaskCanvas.height);
@@ -403,7 +403,7 @@ export class CanvasIO {
} }
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = tensor.width; canvas.width = tensor.width;
canvas.height = tensor.height; canvas.height = tensor.height;
@@ -611,7 +611,7 @@ export class CanvasIO {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
canvas.width = imageData.width; canvas.width = imageData.width;
canvas.height = imageData.height; canvas.height = imageData.height;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.putImageData(imageData, 0, 0); ctx.putImageData(imageData, 0, 0);
const img = new Image(); const img = new Image();
@@ -684,7 +684,7 @@ export class CanvasIO {
const tempCanvas = document.createElement('canvas'); const tempCanvas = document.createElement('canvas');
tempCanvas.width = img.width; tempCanvas.width = img.width;
tempCanvas.height = img.height; tempCanvas.height = img.height;
const tempCtx = tempCanvas.getContext('2d'); const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
tempCtx.drawImage(img, 0, 0); tempCtx.drawImage(img, 0, 0);
@@ -693,7 +693,7 @@ export class CanvasIO {
const maskCanvas = document.createElement('canvas'); const maskCanvas = document.createElement('canvas');
maskCanvas.width = img.width; maskCanvas.width = img.width;
maskCanvas.height = img.height; maskCanvas.height = img.height;
const maskCtx = maskCanvas.getContext('2d'); const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
maskCtx.drawImage(mask, 0, 0); maskCtx.drawImage(mask, 0, 0);
const maskData = maskCtx.getImageData(0, 0, img.width, img.height); const maskData = maskCtx.getImageData(0, 0, img.width, img.height);

6
js/CanvasState.js
View File

@@ -293,7 +293,7 @@ export class CanvasState {
const clonedCanvas = document.createElement('canvas'); const clonedCanvas = document.createElement('canvas');
clonedCanvas.width = maskCanvas.width; clonedCanvas.width = maskCanvas.width;
clonedCanvas.height = maskCanvas.height; clonedCanvas.height = maskCanvas.height;
const clonedCtx = clonedCanvas.getContext('2d'); const clonedCtx = clonedCanvas.getContext('2d', { willReadFrequently: true });
clonedCtx.drawImage(maskCanvas, 0, 0); clonedCtx.drawImage(maskCanvas, 0, 0);
this.maskUndoStack.push(clonedCanvas); this.maskUndoStack.push(clonedCanvas);
@@ -353,7 +353,7 @@ export class CanvasState {
if (this.maskUndoStack.length > 0) { if (this.maskUndoStack.length > 0) {
const prevState = this.maskUndoStack[this.maskUndoStack.length - 1]; const prevState = this.maskUndoStack[this.maskUndoStack.length - 1];
const maskCanvas = this.canvas.maskTool.getMask(); const maskCanvas = this.canvas.maskTool.getMask();
const maskCtx = maskCanvas.getContext('2d'); const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height); maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
maskCtx.drawImage(prevState, 0, 0); maskCtx.drawImage(prevState, 0, 0);
@@ -369,7 +369,7 @@ export class CanvasState {
const nextState = this.maskRedoStack.pop(); const nextState = this.maskRedoStack.pop();
this.maskUndoStack.push(nextState); this.maskUndoStack.push(nextState);
const maskCanvas = this.canvas.maskTool.getMask(); const maskCanvas = this.canvas.maskTool.getMask();
const maskCtx = maskCanvas.getContext('2d'); const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });
maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height); maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
maskCtx.drawImage(nextState, 0, 0); maskCtx.drawImage(nextState, 0, 0);

8
js/MaskTool.js
View File

@@ -8,7 +8,7 @@ export class MaskTool {
this.mainCanvas = canvasInstance.canvas; this.mainCanvas = canvasInstance.canvas;
this.onStateChange = callbacks.onStateChange || null; this.onStateChange = callbacks.onStateChange || null;
this.maskCanvas = document.createElement('canvas'); this.maskCanvas = document.createElement('canvas');
this.maskCtx = this.maskCanvas.getContext('2d'); this.maskCtx = this.maskCanvas.getContext('2d', { willReadFrequently: true });
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
@@ -21,7 +21,7 @@ export class MaskTool {
this.lastPosition = null; this.lastPosition = null;
this.previewCanvas = document.createElement('canvas'); this.previewCanvas = document.createElement('canvas');
this.previewCtx = this.previewCanvas.getContext('2d'); this.previewCtx = this.previewCanvas.getContext('2d', { willReadFrequently: true });
this.previewVisible = false; this.previewVisible = false;
this.previewCanvasInitialized = false; this.previewCanvasInitialized = false;
@@ -220,7 +220,7 @@ export class MaskTool {
const tempCanvas = document.createElement('canvas'); const tempCanvas = document.createElement('canvas');
tempCanvas.width = this.maskCanvas.width; tempCanvas.width = this.maskCanvas.width;
tempCanvas.height = this.maskCanvas.height; tempCanvas.height = this.maskCanvas.height;
const tempCtx = tempCanvas.getContext('2d'); const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
tempCtx.drawImage(this.maskCanvas, 0, 0); tempCtx.drawImage(this.maskCanvas, 0, 0);
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height); const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const data = imageData.data; const data = imageData.data;
@@ -258,7 +258,7 @@ export class MaskTool {
this.maskCanvas.width = newWidth; this.maskCanvas.width = newWidth;
this.maskCanvas.height = newHeight; this.maskCanvas.height = newHeight;
this.maskCtx = this.maskCanvas.getContext('2d'); this.maskCtx = this.maskCanvas.getContext('2d', { willReadFrequently: true });
if (oldMask.width > 0 && oldMask.height > 0) { if (oldMask.width > 0 && oldMask.height > 0) {

10
js/utils/ImageUtils.js
View File

@@ -168,7 +168,7 @@ export const imageToTensor = withErrorHandling(async function (image) {
} }
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = image.width || image.naturalWidth; canvas.width = image.width || image.naturalWidth;
canvas.height = image.height || image.naturalHeight; canvas.height = image.height || image.naturalHeight;
@@ -205,7 +205,7 @@ export const tensorToImage = withErrorHandling(async function (tensor) {
const [, height, width, channels] = tensor.shape; const [, height, width, channels] = tensor.shape;
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
@@ -246,7 +246,7 @@ export const resizeImage = withErrorHandling(async function (image, maxWidth, ma
} }
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d', { willReadFrequently: true });
const originalWidth = image.width || image.naturalWidth; const originalWidth = image.width || image.naturalWidth;
const originalHeight = image.height || image.naturalHeight; const originalHeight = image.height || image.naturalHeight;
@@ -292,7 +292,7 @@ export const imageToBase64 = withErrorHandling(function (image, format = 'png',
} }
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = image.width || image.naturalWidth; canvas.width = image.width || image.naturalWidth;
canvas.height = image.height || image.naturalHeight; canvas.height = image.height || image.naturalHeight;
@@ -374,7 +374,7 @@ export function createImageFromSource(source) {
*/ */
export const createEmptyImage = withErrorHandling(function (width, height, color = 'transparent') { export const createEmptyImage = withErrorHandling(function (width, height, color = 'transparent') {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d', { willReadFrequently: true });
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;