This extension allows you to convert images within HTML files to binary data and embed them using Base64 encoding in Visual Studio Code.
Installation
Open Visual Studio Code.
Open the Extensions view (Ctrl+Shift+X).
Search for "Base64 Image Embedder" and install it.
Usage
Open an HTML file.
Open the command palette (Ctrl+Shift+P).
Type "Base64 Image Embedder: Convert Image to Binary" and press Enter.
The images will be converted to binary data and embedded in the HTML file using Base64 encoding.
Features
Converts images within HTML files to binary data.
Embeds binary data as Base64 encoded images in HTML files.
Easily accessible from the command palette.
Notes
This extension applies only to HTML files.
The converted Base64 data is directly embedded in the HTML file, and the original image files are not modified.
Please note that this extension only applies to local image files.
License
Apache License Version 2.0
Architecture Design Explanation
The architecture of this extension is based on the Clean Architecture. Clean Architecture focuses on placing business rules and application behavior at the center, avoiding dependencies on frameworks or external libraries. Below, we explain the architecture of this extension:
1. Domain Layer
Image Class: Represents an entity for images, holding the path of the image and its Base64 encoded data.
2. Use Case Layer
ConvertImageToBase64UseCase Class: Implements the use case of converting images to binary data, encoding them as Base64, and embedding them in HTML files. This class focuses on business rules and is independent of external frameworks.
3. Adapter Layer
VSCodeAdapter Class: Wraps the Visual Studio Code API to handle requests from the use case layer. Specifically, it handles operations related to VSCode editors and windows. This adapter layer provides an interface between external frameworks or toolkits and the use case layer, facilitating data exchange.
4. Presentation Layer
Extension Entry Point: Serves as the entry point for the VSCode extension, accepting user input and executing the appropriate use cases. It plays the role of a user interface.
5. Data Layer
There is no data layer required for this extension. All data related to image conversion and encoding is processed in memory.
By adopting Clean Architecture, each layer of the extension becomes loosely coupled, resulting in a robust design that is resilient to changes. Additionally, separating business logic and application requirements enhances testability and maintainability.
