@szydlovski/canvas-utility - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/bundle.js

@@ -529,2 +529,5 @@ function loadImage(path) {
 	pixelAt(x, y) {
+		if ([x, y].some((n) => n < 0) || x >= this.width || y >= this.height) {
+			return [0,0,0,0];
+		}
 		const start = y * this.width * 4 + x * 4;
@@ -534,12 +537,12 @@ return this.data.slice(start, start + 4);
 	componentAt(x, y, component = 'r') {
-		const base = y * this.width * 4 + x * 4;
+		const pixel = this.pixelAt(x, y);
 		switch (component) {
 			case 'r':
-				return this.data[base];
+				return pixel[0];
 			case 'g':
-				return this.data[base + 1];
+				return pixel[1];
 			case 'b':
-				return this.data[base + 2];
+				return pixel[2];
 			case 'a':
-				return this.data[base + 3];
+				return pixel[3];
 			default:
@@ -617,2 +620,10 @@ throw new Error(`Invalid RGBA component "${component}"`);
 
+function maskCanvas(canvas, mask) {
+	return createCanvas$2(canvas, ctx => {
+    ctx.drawImage(mask, 0, 0);
+    ctx.globalCompositeOperation = 'source-in';
+    ctx.drawImage(canvas, 0,0 );
+  });
+}
+
 const createCirclePath = (ctx, x, y, radius) => {
@@ -654,3 +665,10 @@ ctx.beginPath();
 
-const fillImage = (ctx, image, x, y, width, height) =>
+const fillImage = (
+	ctx,
+	image,
+	x = 0,
+	y = 0,
+	width = image.width,
+	height = image.height
+) =>
 	ctx.drawImage(
@@ -676,17 +694,12 @@ createCanvas$2(ctx.canvas, (tempCtx) => {
 ) => {
-  ctx.save();
-  ctx.fillStyle = ctx.strokeStyle;
-  const imageData = ImageDataHandle.fromImage(image, width, height);
-  imageData.forEachCoordinate((x, y) => {
-    if (imageData.componentAt(x, y, 'a') === 0) return;
-    if (imageData.hasNeighbor(x, y, ([, , , a]) => a < 255)) {
-      fillCircle(
-        ctx,
-        targetX + x + 0.5,
-        targetY + y + 0.5,
-        radius - 0.5
-      );
-    }
-  });
-  ctx.restore();
+	ctx.save();
+	ctx.fillStyle = ctx.strokeStyle;
+	const imageData = ImageDataHandle.fromImage(image, width, height);
+	imageData.forEachCoordinate((x, y) => {
+		if (imageData.componentAt(x, y, 'a') === 0) return;
+		if (imageData.hasNeighbor(x, y, ([, , , a]) => a < 255)) {
+			fillCircle(ctx, targetX + x + 0.5, targetY + y + 0.5, radius - 0.5);
+		}
+	});
+	ctx.restore();
 };
@@ -768,3 +781,3 @@
 
-export { Canvas, ImageDataHandle, adjustCanvas, copyCanvas, createCanvas$2 as createCanvas, cropCanvas, fillCircle, fillImage, fillPolygon, flipCanvas, getImageData, loadImage$1 as loadImage, resizeCanvas, rotateCanvas, setCanvasImplementation, strokeCircle, strokeImage, strokePolygon, trimCanvas };
+export { Canvas, ImageDataHandle, adjustCanvas, copyCanvas, createCanvas$2 as createCanvas, cropCanvas, fillCircle, fillImage, fillPolygon, flipCanvas, getImageData, loadImage$1 as loadImage, maskCanvas, resizeCanvas, rotateCanvas, setCanvasImplementation, strokeCircle, strokeImage, strokePolygon, trimCanvas };
 //# sourceMappingURL=bundle.js.map

package.json

 {
   "name": "@szydlovski/canvas-utility",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "simple canvas 2d utility - trimming, rotating, resizing",
@@ -5,0 +5,0 @@ "main": "dist/bundle.js",

README.md

@@ -54,2 +54,8 @@ This library contains various utilities designed for working with the HTML5 Canvas. It facilitates operations like creating, copying, cropping, trimming, flipping, merging, resizing and rotating canvases.
 
+## [1.2.0] - 2021-08-01
+
+### Added
+
+- `maskCanvas`
+
 ## [1.1.0] - 2021-08-01
@@ -56,0 +62,0 @@

src/draw-ops/image.js

@@ -5,3 +5,10 @@ import { createCanvas } from '../canvas-ops/createCanvas.js';
 
-export const fillImage = (ctx, image, x, y, width, height) =>
+export const fillImage = (
+	ctx,
+	image,
+	x = 0,
+	y = 0,
+	width = image.width,
+	height = image.height
+) =>
 	ctx.drawImage(
@@ -27,17 +34,12 @@ createCanvas(ctx.canvas, (tempCtx) => {
 ) => {
-  ctx.save();
-  ctx.fillStyle = ctx.strokeStyle;
-  const imageData = ImageDataHandle.fromImage(image, width, height);
-  imageData.forEachCoordinate((x, y) => {
-    if (imageData.componentAt(x, y, 'a') === 0) return;
-    if (imageData.hasNeighbor(x, y, ([, , , a]) => a < 255)) {
-      fillCircle(
-        ctx,
-        targetX + x + 0.5,
-        targetY + y + 0.5,
-        radius - 0.5
-      );
-    }
-  });
-  ctx.restore();
-}
+	ctx.save();
+	ctx.fillStyle = ctx.strokeStyle;
+	const imageData = ImageDataHandle.fromImage(image, width, height);
+	imageData.forEachCoordinate((x, y) => {
+		if (imageData.componentAt(x, y, 'a') === 0) return;
+		if (imageData.hasNeighbor(x, y, ([, , , a]) => a < 255)) {
+			fillCircle(ctx, targetX + x + 0.5, targetY + y + 0.5, radius - 0.5);
+		}
+	});
+	ctx.restore();
+};

src/entities/ImageDataHandle.js

@@ -25,2 +25,5 @@ import { createCanvas } from '../canvas-ops/createCanvas';
 	pixelAt(x, y) {
+		if ([x, y].some((n) => n < 0) || x >= this.width || y >= this.height) {
+			return [0,0,0,0];
+		}
 		const start = y * this.width * 4 + x * 4;
@@ -30,12 +33,12 @@ return this.data.slice(start, start + 4);
 	componentAt(x, y, component = 'r') {
-		const base = y * this.width * 4 + x * 4;
+		const pixel = this.pixelAt(x, y);
 		switch (component) {
 			case 'r':
-				return this.data[base];
+				return pixel[0];
 			case 'g':
-				return this.data[base + 1];
+				return pixel[1];
 			case 'b':
-				return this.data[base + 2];
+				return pixel[2];
 			case 'a':
-				return this.data[base + 3];
+				return pixel[3];
 			default:
@@ -42,0 +45,0 @@ throw new Error(`Invalid RGBA component "${component}"`);

src/index.js

@@ -13,2 +13,3 @@ export {
 export { adjustCanvas } from './canvas-ops/adjustCanvas.js';
+export { maskCanvas } from './canvas-ops/maskCanvas.js';
 export { getImageData } from './canvas-ops/getImageData.js';
@@ -15,0 +16,0 @@ export * from './draw-ops/circle.js';

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99113

increased by1.63%

Number of package files

26

increased by4%

Lines of code

1279

increased by1.99%

Number of lines in readme file

79

increased by8.22%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes