diff --git a/_posts/2025-01-08-manipulate-pixels-python.md b/_posts/2025-01-08-manipulate-pixels-python.md new file mode 100644 index 0000000..9cdd024 --- /dev/null +++ b/_posts/2025-01-08-manipulate-pixels-python.md @@ -0,0 +1,54 @@ +--- +title: Manipulate image pixels in Python +layout: post +excerpt: I had a black and white image but I wanted a black image with the white bits transparent. + +thumbnail: /assets/blog/manipulate_pixels.png +social_image: /assets/blog/manipulate_pixels.png +assets: +alt: +image_class: invertable + +--- + +The way I've implemented dark mode on this site is to mark some images with a class `invertable` that means they still look good inverted. And then in CSS I go ahead and invert them if you're in dark mode. For other images I just dim them a bit. + + +
+ + +
Try switching back and forth between dark mode and light mode, the one on the right works, the one on the left gets and ugly black background.
+
+ +However for some images like this black and white png it looks a bit weird when inverted because the background becomes hard black but my site's background is a dark grey. So I wanted to make the white pixels transparent instead. + +Anyway the point of this post is that I knew in terms of pixel values what I wanted to do but wasn't sure how to do this in an image editors. So here's the code for you and my future reference: + +```python +import sys + +import numpy as np +from PIL import Image + +if len(sys.argv) < 3: + print("Usage: python convert_to_transparent.py ") + sys.exit(1) + +input_path, output_path = sys.argv[1], sys.argv[2] + +grey = np.array(Image.open(input_path).convert("L")) +alpha_channel = 255 - grey + +rgba_array = np.zeros((grey.shape[0], grey.shape[1], 4), dtype=np.uint8) +rgba_array[..., 0] = 0 # Red channel +rgba_array[..., 1] = 0 # Green channel +rgba_array[..., 2] = 0 # Blue channel +rgba_array[..., 3] = alpha_channel # Alpha channel + +# Create a new image for the output +rgba_img = Image.fromarray(rgba_array, mode="RGBA") + +# Save the result +rgba_img.save(output_path, "PNG") +print(f"Image saved to {output_path}") +``` diff --git a/_posts/2100-12-30-template.md b/_posts/2100-12-30-template.md index 7271f57..41a4ca2 100644 --- a/_posts/2100-12-30-template.md +++ b/_posts/2100-12-30-template.md @@ -3,10 +3,10 @@ title: layout: post excerpt: A one sentence summary. -images: /assets/images/2024 +images: -image: thumbnail: +social_image: assets: alt: diff --git a/_sass/base.scss b/_sass/base.scss index c9b90a2..3c11d4a 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -233,7 +233,7 @@ figure.two-wide { justify-content: center; gap: 1em; margin-bottom: 1em; - * { + *:not(figcaption) { width: calc(50% - 0.5em); } } @@ -244,7 +244,7 @@ figure.multiple { justify-content: center; gap: 1em; margin-bottom: 1em; - * { + *:not(figcaption) { width: calc(50% - 0.5em); margin: 0; padding: 0; @@ -260,7 +260,7 @@ figure.multiple { margin-bottom: 1em; place-items: center center; - * { + *:not(figcaption) { margin: 0; padding: 0; width: 100%; diff --git a/assets/blog/manipulate_pixels.png b/assets/blog/manipulate_pixels.png new file mode 100644 index 0000000..f832fd7 Binary files /dev/null and b/assets/blog/manipulate_pixels.png differ diff --git a/assets/blog/micropython/convert_to_transparent.py b/assets/blog/micropython/convert_to_transparent.py index 763e856..5b51cf0 100644 --- a/assets/blog/micropython/convert_to_transparent.py +++ b/assets/blog/micropython/convert_to_transparent.py @@ -1,28 +1,26 @@ +import sys + import numpy as np from PIL import Image +if len(sys.argv) < 3: + print("Usage: python convert_to_transparent.py ") + sys.exit(1) -def convert_image(input_path, output_path): - # Open the image - grey = np.array(Image.open(input_path).convert("L")) - alpha_channel = 255 - grey - - rgba_array = np.zeros((grey.shape[0], grey.shape[1], 4), dtype=np.uint8) - rgba_array[..., 0] = 0 # Red channel - rgba_array[..., 1] = 0 # Green channel - rgba_array[..., 2] = 0 # Blue channel - rgba_array[..., 3] = alpha_channel # Alpha channel - - # Create a new image for the output - rgba_img = Image.fromarray(rgba_array, mode="RGBA") - +input_path, output_path = sys.argv[1], sys.argv[2] - - # Save the result - rgba_img.save(output_path, "PNG") - print(f"Image saved to {output_path}") +grey = np.array(Image.open(input_path).convert("L")) +alpha_channel = 255 - grey -# Example usage -input_file = "simulated_display.png" -output_file = "simulated_display_transparent.png" -convert_image(input_file, output_file) \ No newline at end of file +rgba_array = np.zeros((grey.shape[0], grey.shape[1], 4), dtype=np.uint8) +rgba_array[..., 0] = 0 # Red channel +rgba_array[..., 1] = 0 # Green channel +rgba_array[..., 2] = 0 # Blue channel +rgba_array[..., 3] = alpha_channel # Alpha channel + +# Create a new image for the output +rgba_img = Image.fromarray(rgba_array, mode="RGBA") + +# Save the result +rgba_img.save(output_path, "PNG") +print(f"Image saved to {output_path}") \ No newline at end of file