add very simple white bg remover

src/10th/Roster.jsx

@@ -92,6 +92,7 @@ const Unit = ({
 	} = unit;
 	const [image, setImage] = useLocalStorage("image" + name);
 	const hasImage = image && image !== "undefined";
+	const [bgRemoved, setBgRemoved] = useState(false);
 
 	const weapons = [...meleeWeapons, ...rangedWeapons];
 
@@ -163,6 +164,33 @@ const Unit = ({
 			.replace(")", "");
 	}
 
+	const removeWhiteBackground = (imageSrc) => {
+		return new Promise((resolve) => {
+			const img = new Image();
+			img.crossOrigin = "Anonymous";
+			img.src = imageSrc;
+			img.onload = () => {
+				const canvas = document.createElement("canvas");
+				const ctx = canvas.getContext("2d");
+				canvas.width = img.width;
+				canvas.height = img.height;
+				ctx.drawImage(img, 0, 0);
+
+				const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+				const data = imageData.data;
+
+				for (let i = 0; i < data.length; i += 4) {
+					if (data[i] > 240 && data[i + 1] > 240 && data[i + 2] > 240) {
+						data[i + 3] = 0; // Set alpha to 0
+					}
+				}
+
+				ctx.putImageData(imageData, 0, 0);
+				resolve(canvas.toDataURL());
+			};
+		});
+	};
+
 	return (
 		<div
 			className={
@@ -345,6 +373,26 @@ const Unit = ({
 						/>
 					)}
 					<div className="absolute right-[1px] top-[2px] flex gap-1">
+						{hasImage && !bgRemoved && (
+							<button
+								className="button print-display-none"
+								style={{
+									border: "1px solid #999",
+									padding: "1px 4px",
+									fontSize: "0.8rem",
+									backgroundColor: "#f0f0f0",
+								}}
+								onClick={async () => {
+									// reset uploadRef
+									uploadRef.current.value = "";
+									const resultUrl = await removeWhiteBackground(image);
+									setImage(resultUrl);
+									setBgRemoved(true);
+								}}
+							>
+								Remove white from image
+							</button>
+						)}
 						<label
 							className="button print-display-none"
 							style={{
@@ -367,6 +415,7 @@ const Unit = ({
 										let reader = new FileReader();
 										reader.onload = function (ev) {
 											setImage(ev.target.result);
+											setBgRemoved(false);
 										}.bind(this);
 										reader.readAsDataURL(e.target.files[0]);
 									}
@@ -388,6 +437,7 @@ const Unit = ({
 								}}
 								onClick={() => {
 									setImage(undefined);
+									setBgRemoved(false);
 								}}
 							>
 								Clear image