php源码文字生成128*32像素的单色bmp图片并取模可以输入文字、调节字体、字体大小位置可以调节靠左居中(水平和垂直都居中) 靠右。生存预览，点放大可以多倍放大预览，保存为单色bmp图片

小黄人软件

已于 2024-04-24 11:03:41 修改

阅读量575

点赞数 25

文章标签： php android 开发语言

于 2024-04-24 11:02:31 首次发布

本文链接：https://blog.csdn.net/chenhao0568/article/details/137958704

版权

需求

php 文字生成128*32像素的单色bmp图片可以输入文字，可以调节字体、字体大小位置可以调节靠左居中(水平和垂直都居中) 靠右。生存预览，点放大可以2倍放大预览，保存为单色bmp图片。

最终效果【源码下载】

在这里插入图片描述

步骤

1.文字生成png图片
2.png图片转为单色1位bmp
3.对bmp取模输出字节数组：可以按各种扫描顺序从上到下从左在右高位在前反向等（设置我隐藏了）

确认PHP环境是否已经配置了GD库：

创建一个名为phpinfo.php的文件，并在其中写入以下代码：

<?php
phpinfo();
?>

将该文件上传到你的服务器上，并通过浏览器访问它。
在打开的页面中搜索“gd”。如果找到了与GD库相关的信息，那么就说明你的PHP环境已经配置了GD库。

如果你没有找到与GD库相关的信息，那么你可能需要安装并启用GD库。在大多数情况下，PHP默认安装是已经启用了GD库的。
在这里插入图片描述

工程下载

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Generator</title>
    <style>
        #imagePreview {
            width: 128px;
            height: 32px;
            image-rendering: pixelated;
        }
    </style>
</head>
<body>
    <input type="text" id="textInput" placeholder="Enter text" value="小黄人">
    <select id="fontSelect">
        <option value="simsun.ttc">SimSun</option>
        <option value="hwxkjc.ttf">HWXKJC</option>
        <option value="STLITI.TTF">STLITI.TTF</option>
        <option value="arial.ttf">arial.ttf</option>
        <!-- Add more font options here -->
    </select>
    <input type="number" id="fontSizeInput" placeholder="Font Size" value="12">
    <select id="textAlign">
        <option value="left">Left</option>
        <option value="center">Center</option>
        <option value="right">Right</option>
    </select>
    <button onclick="generateImage()">Generate Image</button>
    <button onclick="zoomIn()">Zoom In</button>
    <button onclick="dotMatrix()">Dot Matrix</button>
    <div id="imageContainer">
        <img id="imagePreview" src="output.bmp?date=${new Date().getTime()}" alt="Preview Image">
    </div>
    <pre id="modResult"></pre>


    <form id="uploadForm" enctype="multipart/form-data" style="display:none;"">
        <input type="text" id="filePath" placeholder="Enter file path" value="output.bmp">
        <br>
		<input type="checkbox" name="horizontal"> 横向取模(不勾选为纵向)
        <br>
		<input type="checkbox" name="secondByteOnRight" checked> 第二字节在右(不勾选为第二字节在在下)
        <br>
		<input type="checkbox" name="topToBottom" checked> 从上到下(无效)
        <input type="checkbox" name="leftToRight" checked> 从左到右(无效)
        <br>
        <input type="checkbox" name="highBitFirst" checked> 高位在前(即大端模式)
        <input type="checkbox" name="pixelReverse" checked> 像素反转(即黑白颠倒)
        <br>
        <button type="button" οnclick="submitForm()">生成取模</button>
    </form>
    <script>
        function generateImage() {
            const text = document.getElementById('textInput').value;
            const font = document.getElementById('fontSelect').value;
            const fontSize = document.getElementById('fontSizeInput').value;
            const textAlign = document.getElementById('textAlign').value;


            document.getElementById('imagePreview').src = `generate_image.php?text=${text}&font=${font}&fontSize=${fontSize}&textAlign=${textAlign}`;
            // // Send a request to generate_image.php with provided parameters
			// fetch(`generate_image.php?text=${text}&font=${font}&fontSize=${fontSize}&textAlign=${textAlign}`)
			// .then(response => {
			// 	// Handle response here
			// })
			// .catch(error => {
			// 	console.error('Error:', error);
			// });
			// 	// Call PHP function to generate BMP image with provided parameters
			// 	// Display the generated image on the page
			//  document.getElementById('imagePreview').src = `output.bmp?date=${new Date().getTime()}`;

	  
			// const image = document.getElementById('imagePreview');
			// const imageUrl = image.src;
			// image.src = '';

			// setTimeout(() => {
			// 	image.src = imageUrl;
			// }, 10);
        }

        function zoomIn() {
            const image = document.getElementById('imagePreview');
            const currentWidth = image.width;
            const currentHeight = image.height;
            image.style.width = `${currentWidth * 2}px`;
            image.style.height = `${currentHeight * 2}px`;
        }
        
        function dotMatrix() {
            var formData = new FormData(document.getElementById('uploadForm'));
            fetch('process_image.php', {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('imagePreview').src = data.imageUrl+`?date=${new Date().getTime()}`;
                //document.getElementById('imagePreview').style.display = 'block';
                document.getElementById('modResult').textContent = data.modData;
            });
        }
    </script>
</body>
</html>

效果：失败

在这里插入图片描述

小黄人软件

关注

25
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
4
评论
php源码文字生成128*32像素的单色bmp图片并取模可以输入文字、调节字体、字体大小位置可以调节靠左居中(水平和垂直都居中) 靠右。生存预览，点放大可以多倍放大预览，保存为单色bmp图片

php 文字生成128*32像素的单色bmp图片可以输入文字，可以调节字体、字体大小位置可以调节靠左居中(水平和垂直都居中) 靠右。生存预览，点放大可以2倍放大预览，保存为单色bmp图片。
复制链接

扫一扫