使用JavaScript将PNG格式图片转为BMP格式的完整实现代码
更新时间：2025年12月26日 09:14:25 作者：还是大剑师兰特
这篇文章主要介绍了如何使用JavaScript将PNG图片转换为BMP格式,通过Canvas读取PNG像素数据,并按照BMP文件格式规范组装字节数据,最终生成BMP格式的Blob/文件,需要的朋友可以参考下
在浏览器端使用 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 需额外处理。
到此这篇关于使用JavaScript将PNG格式图片转为BMP格式的完整实现代码的文章就介绍到这了,更多相关JavaScript PNG格式转为BMP格式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript实现带箭头标识的多级下拉菜单效果,可实现横向与纵向箭头的形式标识选中菜单项位置的功能,涉及javascript针对页面元素位置的判定与样式动态操作技巧,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了Bootstrap导航条的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了JavaScript获取当前日期是星期几的方法,涉及javascript中getDay函数获取日期的技巧,需要的朋友可以参考下2015-04-04
在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。在程序设计中有很多实用的设计模式，而其中大部分语言的实现都是基于“类”。，本文将总结了JavaScript中常见的十五种设计模式，感兴趣的朋友可以参考下2023-05-05
Omi v1.0.2发布正式支持传递javascript表达式
这篇文章主要介绍了Omi v1.0.2发布正式支持传递javascript表达式,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JS块级作用域和私有变量,结合实例形式较为详细的分析了javascript块级作用域和私有变量相关概念、原理、操作技巧,需要的朋友可以参考下2019-05-05
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面这篇文章主要给大家介绍了关于微信小程序控制view隐藏显示的5种方法,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了如何利用原生JS实现转盘游戏，可以自由调整概率。文中的示例代码讲解详细，对我们学习JavaScript有一定帮助，需要的可以参考一下2022-03-03
这篇文章主要介绍了微信小程序实现简单表格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
这篇文章主要为大家详细介绍了JS实现一个秒表计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
最新评论