使用javascript将png格式图片转为bmp格式

原创于 2025-12-23 07:45:00 发布 · 568 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #大剑师 #png转bmp

Javascript理论与实践专栏收录该内容

129 篇文章

订阅专栏

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】

在这里插入图片描述

在浏览器端使用 JavaScript 将 PNG 图片转换为 BMP 格式，核心思路是：先通过 Canvas 读取 PNG 像素数据，再按照 BMP 文件格式规范组装字节数据，最终生成 BMP 格式的 Blob/文件。以下是完整可运行的实现方案：

核心知识点

BMP 文件结构：由文件头（14字节）、信息头（40字节）、像素数据三部分组成；
像素格式转换：Canvas 读取的像素是 RGBA 格式，需转为 BMP 要求的 BGRA（小端序，且忽略 Alpha 通道）；
字节对齐：BMP 每行像素数据需按 4 字节对齐，不足补 0。

完整实现代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PNG 转 BMP</title>
</head>
<body>
    <input type="file" id="fileInput" accept="image/png">
    <button id="convertBtn" disabled>转换为 BMP</button>
    <script>
        // 全局变量存储图片数据
        let imageData = null;
        const fileInput = document.getElementById('fileInput');
        const convertBtn = document.getElementById('convertBtn');

        // 监听文件选择
        fileInput.addEventListener('change', async (e) => {
            const file = e.target.files[0];
            if (!file || !file.type.includes('png')) {
                alert('请选择 PNG 格式图片');
                return;
            }
            // 读取图片并获取像素数据
            imageData = await getImageData(file);
            convertBtn.disabled = false;
        });

        // 监听转换按钮点击
        convertBtn.addEventListener('click', () => {
            if (!imageData) return;
            // 转换为 BMP 格式 Blob
            const bmpBlob = pngToBmp(imageData);
            // 下载文件
            downloadBlob(bmpBlob, 'converted.bmp');
        });

        /**
         * 读取图片文件并获取 Canvas ImageData
         * @param {File} file - PNG 文件
         * @returns {Promise<ImageData>} 像素数据
         */
        function getImageData(file) {
            return new Promise((resolve) => {
                const img = new Image();
                // 解决跨域问题（本地文件无需担心，在线环境需确保图片跨域权限）
                img.crossOrigin = 'anonymous';
                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);
                    resolve(ctx.getImageData(0, 0, img.width, img.height));
                };
                img.src = URL.createObjectURL(file);
            });
        }

        /**
         * 将 ImageData 转换为 BMP 格式 Blob
         * @param {ImageData} imageData - Canvas 像素数据
         * @returns {Blob} BMP 格式 Blob
         */
        function pngToBmp(imageData) {
            const { width, height, data } = imageData;
            const rowSize = Math.floor((24 * width + 31) / 32) * 4; // 每行字节数（4字节对齐）
            const pixelArraySize = rowSize * height; // 像素数据总字节数
            const fileSize = 14 + 40 + pixelArraySize; // BMP 文件总大小

            // 创建 ArrayBuffer 存储 BMP 数据（文件头14 + 信息头40 + 像素数据）
            const buffer = new ArrayBuffer(fileSize);
            const view = new DataView(buffer);

            // ---------------------- 1. 写入 BMP 文件头（14字节） ----------------------
            view.setUint8(0, 0x42); // 'B'
            view.setUint8(1, 0x4D); // 'M'
            view.setUint32(2, fileSize, true); // 文件总大小（小端序）
            view.setUint32(6, 0, true); // 保留字段
            view.setUint32(10, 14 + 40, true); // 像素数据偏移量

            // ---------------------- 2. 写入 BMP 信息头（40字节） ----------------------
            view.setUint32(14, 40, true); // 信息头大小
            view.setInt32(18, width, true); // 宽度
            view.setInt32(22, -height, true); // 高度（负数表示从上到下绘制）
            view.setUint16(26, 1, true); // 平面数
            view.setUint16(28, 24, true); // 位深度（24位，无Alpha）
            view.setUint32(30, 0, true); // 压缩方式（0 = 不压缩）
            view.setUint32(34, pixelArraySize, true); // 像素数据大小
            view.setInt32(38, 2835, true); // 水平分辨率（像素/米，默认值）
            view.setInt32(42, 2835, true); // 垂直分辨率（像素/米，默认值）
            view.setUint32(46, 0, true); // 调色板颜色数
            view.setUint32(50, 0, true); // 重要颜色数

            // ---------------------- 3. 写入像素数据（BGRA 转 BGR，补对齐字节） ----------------------
            let offset = 14 + 40; // 像素数据起始偏移
            for (let y = 0; y < height; y++) {
                for (let x = 0; x < width; x++) {
                    const idx = (y * width + x) * 4;
                    view.setUint8(offset++, data[idx + 2]); // B（蓝色）
                    view.setUint8(offset++, data[idx + 1]); // G（绿色）
                    view.setUint8(offset++, data[idx]);     // R（红色）
                    // 忽略 Alpha 通道（24位BMP无Alpha）
                }
                // 补充行对齐字节（每行必须是4的倍数）
                const padding = (rowSize - (width * 3)) % 4;
                for (let p = 0; p < padding; p++) {
                    view.setUint8(offset++, 0);
                }
            }

            // 返回 BMP Blob
            return new Blob([buffer], { type: 'image/bmp' });
        }

        /**
         * 下载 Blob 文件
         * @param {Blob} blob - 要下载的 Blob
         * @param {string} fileName - 文件名
         */
        function downloadBlob(blob, fileName) {
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = fileName;
            a.click();
            URL.revokeObjectURL(a.href); // 释放内存
        }
    </script>
</body>
</html>

使用说明

将上述代码保存为 HTML 文件，用浏览器打开；
点击文件选择框，选择要转换的 PNG 图片；
点击「转换为 BMP」按钮，自动下载转换后的 BMP 文件。

关键注意事项

跨域限制：如果在线使用，确保 PNG 图片有跨域访问权限（Access-Control-Allow-Origin），否则 Canvas 无法读取像素数据；
位深度：示例实现的是 24 位 BMP（无 Alpha 通道），BMP 也支持 32 位带 Alpha，但兼容性较差，如需支持可修改信息头的位深度为 32，并保留 Alpha 通道；
性能：处理超大图片（如 4K 以上）时，可能会有性能卡顿，可考虑分片处理；
兼容性：所有现代浏览器（Chrome、Firefox、Edge、Safari）均支持，IE 不支持 Blob 和 DataView，需兼容 IE 需额外处理。