<!DOCTYPE html> <html> <head> <title>BMP To Canvas</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <input type="file" id="input"> <canvas id="canvas1" width="128" height="128"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> <script> var inputElement = document.getElementById("input"); inputElement.addEventListener("change", handleFiles, false); var canvas1 = document. getElementById('canvas1'); var ctx1 = canvas1.getContext('2d'); function handleFiles(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.addEventListener("load", processimage, false); reader.readAsArrayBuffer(file); }
function processimage(e) { var buffer = e.target.result; var bitmap = getBMP(buffer); var imageData = convertToImageData(bitmap); ctx1.putImageData(imageData, 0, 0); }
function getBMP(buffer) { var datav = new DataView(buffer); var bitmap = {}; bitmap.fileheader = {}; bitmap.fileheader.bfType = datav.getUint16(0, true); bitmap.fileheader.bfSize = datav.getUint32(2, true); bitmap.fileheader.bfReserved1 = datav.getUint16(6, true); bitmap.fileheader.bfReserved2 = datav.getUint16(8, true); bitmap.fileheader.bfOffBits = datav.getUint32(10, true);
Google Maps is the basis of all Google Mapping products and it's easy to use in your website or web app. We take a quick look at how to get started and what features you can take advantage of.
Who needs HTML5 - it should come as no surprise that you don't need to wait for HTML5 to write games. All you need is Dynamic HTML, i.e. HTML4 and JavaScript. This project builds a fun demo in the for [ ... ]
