Image to BMP Converter>

This is a live demo and preview. Get this Image to BMP Converter for free for your own websites and blogs
Image to BMP Converter

Image to BMP Converter

This is Code and demo of Image to BMP Converter. Copy this code and paste it into your own website and blog posts.

<center>
<html>
<head>
	<title>Image to BMP Converter</title>
	<style> .container {
  margin: 0 auto;
  max-width: 600px;
  padding: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 1), 0 0 0 3px #006db0;
  border-radius: 0px;
}

h1 {
  margin-top: 50px;
}

canvas {
  margin-top: 20px;
  border: 5px solid #ccc;
}

#convert-btn {
  margin-top: 20px;
}

#download-link {
  display: block;
}
 </style>
</head>
<body>
	<div class="container">
		<h1>Image to BMP Converter</h1>
		<input id="file-input" type="file" />
		<canvas id="canvas"></canvas>
		<button id="convert-btn">Convert to BMP</button>
		<a download="image.bmp" id="download-link"></a>
	</div>

fileInput.addEventListener('change', () => {
	  const reader = new FileReader();
	  reader.onload = () => {
	    const img = new Image();
	    img.onload = () => {
	      canvas.width = img.width;
	      canvas.height = img.height;
	      const ctx = canvas.getContext('2d');
	      ctx.drawImage(img, 0, 0);
	      convertBtn.addEventListener('click', () => {
	        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	        const bmpData = createBMP(imageData);
	        const blob = new Blob([bmpData], {type: 'image/bmp'});
	        const url = URL.createObjectURL(blob);
	        downloadLink.href = url;
	        downloadLink.click();
	        URL.revokeObjectURL(url);
	      });
	    };
	    img.src = reader.result;
	  };
	  reader.readAsDataURL(fileInput.files[0]);
	});

function createBMP(imageData) {
	  const width = imageData.width;
	  const height = imageData.height;
	  const data = imageData.data;
	  const padding = (4 - (width * 3) % 4) % 4;
	  const bmpSize = 54 + (width * height * 3) + (padding * height);
	  const buffer = new ArrayBuffer(bmpSize);
	  const bmpData = new DataView(buffer);

bmpData.setUint8(0, 66); // B
	  bmpData.setUint8(1, 77); // M
	  bmpData.setUint32(2, bmpSize, true);
	  bmpData.setUint32(10, 54, true);
	  bmpData.setUint32(14, 40, true);
	  bmpData.setUint32(18, width, true);
	  bmpData.setUint32(22, height, true);
	  bmpData.setUint16(26, 1, true);
	  bmpData.setUint16(28, 24, true);
	  bmpData.setUint32(34, (width * height * 3) + (padding * height), true);

Code terms

You Can freely use it for personal and users
You Can modify/change the main code
You Can freely add your blogs and websites
Attribution is not required.

If you have any questions about this converter, please feel free to reach out to us via email.

Best Image to BMP Converter-Get A free code and script

Image to BMP Converter

Code Editor

Code Editor

Popular

Tags

Navigation