37 lines
1.4 KiB
HTML
37 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>BGR565 Inverted Image Converter</title>
|
|
<link rel="stylesheet" href="css/bgr565.css">
|
|
</head>
|
|
<body>
|
|
<h1>BGR565 Inverted Image Converter</h1>
|
|
<form id="imageForm">
|
|
<input type="file" id="imageInput" accept="image/*">
|
|
<br>
|
|
<label>Width: <input type="number" id="width" value="190" min="1"></label>
|
|
<label>Height: <input type="number" id="height" value="40" min="1"></label>
|
|
<button type="button" id="convertBtn">Convert & Download .raw</button>
|
|
</form>
|
|
<canvas id="canvas" style="display:none;"></canvas>
|
|
<div id="preview"></div>
|
|
<script src="js/bgr565.js"></script>
|
|
</body>
|
|
</html>
|
|
<!--
|
|
How this tool works:
|
|
1. Select an image file (any format supported by your browser).
|
|
2. Set the desired width and height (default: 190x40).
|
|
3. Click "Convert & Download .raw".
|
|
4. The image is resized/cropped to the specified size, converted to inverted BGR565 format (matching your display), and a .raw file is downloaded.
|
|
5. The .raw file can be copied to your SD card and displayed directly on your ESP32 with your display code.
|
|
|
|
Technical details:
|
|
- Uses HTML5 Canvas to process the image in the browser.
|
|
- JavaScript reads pixel data, converts to BGR565, inverts each value, and outputs a binary .raw file.
|
|
- No data is uploaded; all processing is local in your browser.
|
|
-->
|
|
</html>
|
|
</html>
|