使用JavaScript将JPG格式图片转为BMP格式的完整代码
更新时间：2025年12月26日 09:15:54 作者：还是大剑师兰特
这篇文章主要介绍了如何使用JavaScript将JPG图片转换为BMP图片,核心逻辑与PNG转BMP一致,仅需调整文件选择的accept类型,且JPG无Alpha通道,无需额外处理透明通道,提供了完整的代码实现,需要的朋友可以参考下
将 JPG 转换为 BMP 的核心逻辑与 PNG 转 BMP 一致（都是通过 Canvas 读取像素后按 BMP 格式组装字节），仅需调整文件选择的 accept 类型，且 JPG 本身无 Alpha 通道，转换时无需额外处理透明通道，兼容性更优。以下是完整可运行的实现方案：
完整代码（JPG 转 BMP）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JPG 转 BMP</title>
</head>
<body>
<input type="file" id="fileInput" accept="image/jpeg,image/jpg">
<button id="convertBtn" disabled>转换为 BMP</button>
<script>
let imageData = null;
const fileInput = document.getElementById('fileInput');
const convertBtn = document.getElementById('convertBtn');
// 监听文件选择（支持 JPG/JPEG）
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file || !['image/jpeg', 'image/jpg'].includes(file.type)) {
alert('请选择 JPG/JPEG 格式图片');
return;
}
imageData = await getImageData(file);
convertBtn.disabled = false;
});
// 转换并下载 BMP
convertBtn.addEventListener('click', () => {
if (!imageData) return;
const bmpBlob = jpgToBmp(imageData);
downloadBlob(bmpBlob, 'converted.bmp');
});
/**
* 读取 JPG 图片并获取 Canvas ImageData
* @param {File} file - JPG 文件
* @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 转换为 24 位无压缩 BMP Blob
* @param {ImageData} imageData - Canvas 像素数据
* @returns {Blob} BMP 格式 Blob
*/
function jpgToBmp(imageData) {
const { width, height, data } = imageData;
// 计算每行字节数（4字节对齐）
const rowBytes = Math.floor((24 * width + 31) / 32) * 4;
const pixelDataSize = rowBytes * height;
const totalFileSize = 14 + 40 + pixelDataSize; // BMP 总大小
// 创建 ArrayBuffer 存储 BMP 数据
const buffer = new ArrayBuffer(totalFileSize);
const dv = new DataView(buffer);
// ------------------- 1. 写入 BMP 文件头（14字节） -------------------
dv.setUint8(0, 0x42); // 'B'
dv.setUint8(1, 0x4D); // 'M'
dv.setUint32(2, totalFileSize, true); // 文件总大小（小端序）
dv.setUint16(6, 0, true); // 保留字段1
dv.setUint16(8, 0, true); // 保留字段2
dv.setUint32(10, 54, true); // 像素数据偏移（14+40）
// ------------------- 2. 写入 BMP 信息头（40字节，BITMAPINFOHEADER） -------------------
dv.setUint32(14, 40, true); // 信息头大小
dv.setInt32(18, width, true); // 宽度
dv.setInt32(22, -height, true); // 高度（负数=从上到下绘制）
dv.setUint16(26, 1, true); // 平面数=1
dv.setUint16(28, 24, true); // 位深度=24（无Alpha）
dv.setUint32(30, 0, true); // 压缩方式=无压缩（BI_RGB）
dv.setUint32(34, pixelDataSize, true); // 像素数据大小
dv.setInt32(38, 2835, true); // 水平分辨率（96 DPI）
dv.setInt32(42, 2835, true); // 垂直分辨率（96 DPI）
dv.setUint32(46, 0, true); // 调色板颜色数=0（24位无需）
dv.setUint32(50, 0, true); // 重要颜色数=0
// ------------------- 3. 写入像素数据（BGR 格式 + 行对齐） -------------------
let offset = 54; // 像素数据起始偏移
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const pixelIdx = (y * width + x) * 4;
dv.setUint8(offset++, data[pixelIdx + 2]); // 蓝通道（B）
dv.setUint8(offset++, data[pixelIdx + 1]); // 绿通道（G）
dv.setUint8(offset++, data[pixelIdx]); // 红通道（R）
// JPG 无 Alpha，24位 BMP 也无需存储 Alpha
}
// 补充行对齐的 0 字节（确保每行字节数是4的倍数）
const padding = rowBytes - (width * 3);
for (let p = 0; p < padding; p++) {
dv.setUint8(offset++, 0);
}
}
// 返回 BMP Blob（MIME 类型为 image/bmp）
return new Blob([buffer], { type: 'image/bmp' });
}
/**
* 下载 Blob 文件到本地
* @param {Blob} blob - BMP 格式 Blob
* @param {string} fileName - 下载文件名
*/
function downloadBlob(blob, fileName) {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(a.href); // 释放内存
}
</script>
</body>
</html>
使用步骤
- 将代码保存为
.html文件，用浏览器打开； - 点击文件选择框，选择任意 JPG/JPEG 图片；
- 点击「转换为 BMP」按钮，自动下载转换后的 BMP 文件。
关键注意事项
- 跨域问题：若在线使用（非本地文件），需确保 JPG 图片所在服务器配置了
Access-Control-Allow-Origin响应头，否则 Canvas 无法读取像素数据； - 位深度：示例生成 24 位 BMP（最通用，无 Alpha），如需 32 位 BMP（带 Alpha），只需修改：
- 信息头
biBitCount（偏移 28）改为 32； - 像素数据写入时增加 Alpha 通道：
dv.setUint8(offset++, data[pixelIdx + 3]);； - 行字节数公式改为
Math.floor((32 * width + 31) / 32) * 4（32位每行天然4字节对齐，无需补0）；
- 信息头
- 性能优化：处理超大 JPG（如 4K/8K）时，可分片读取像素数据，避免浏览器卡顿；
- 浏览器兼容：支持所有现代浏览器（Chrome/Firefox/Edge/Safari），IE 不支持
Blob/DataView，需兼容 IE 需额外适配。
验证转换结果
转换后的 BMP 文件可通过以下方式验证：
- 用系统自带画图工具打开，能正常显示则格式正确；
- 用十六进制编辑器查看文件开头，前 2 字节应为
42 4D（BM 标识）。
到此这篇关于使用JavaScript将JPG格式图片转为BMP格式的完整代码的文章就介绍到这了,更多相关JavaScript JPG格式转为BMP格式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇js设置随机切换背景图片的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了微信小程序与webview交互实现支付功能，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
本篇文章主要介绍了JavaScript实现图片轮播组件代码示例，对图片轮播效果感兴趣的小伙伴们可以参考一下。2016-11-11
javascript阻止scroll事件多次执行的思路及实现
阻止scroll事件多次执行主要是为了解决一些常见网页特效在js解析时预期与效果不同，感兴趣的朋友可以了解下2013-11-11
typescript在node.js下使用别名(paths)无效的问题详解
这篇文章主要给大家介绍了关于typescript在node.js下使用别名(paths)无效问题的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-07-07
bootstrap框架中的网格系统就是将容器平分成12份，在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。接下来通过本文给大家介绍Bootstrap网格系统，感兴趣的朋友一起学习2016-04-04
JsDom编程小结，需要进行dom操作的朋友可以参考下。2011-08-08
今天小编就为大家分享一篇bootstrap下拉框动态赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了微信小程序实现瀑布流分页滚动加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了JS实现table表格内针对某列内容进行即时搜索筛选功能,涉及javascript针对HTML元素的遍历、属性动态修改相关操作技巧,需要的朋友可以参考下2018-05-05
最新评论