ビットマップファイルを生成する[BMP.js]
Javascriptでビットマップを作成する「BMP.js」の使い方です。
ブラウザがChromeの場合は、Chromeのセキュリティ仕様でローカルで実行するとエラーが発生します。回避策はサーバーにHTMLファイルをアップするか、エラー回避方法をご覧ください。
ダウンロード
BMP.js (オープンソース)
ダウンロードの方法がわからない方はこちらからです。
BMP.jsの使い方
「TBMPWriter」クラスを使用してビットマップファイルを生成します。
TBMPWriterのコンストラクタでCanvasのImageDataオブジェクトを指定して、TBMPWriter.SaveToFile()でファイルを作成するだけです。
※対応色数は2色/16色/256色/24bitです。(自動認識)
TBMPWriterのコンストラクタ
クラスを生成 | |
---|---|
コンストラクタ | new TBMPWriter(imagedata) |
引数 | imagedata: ImageData オブジェクト |
戻り値 | TBMPWriterオブジェクト |
TBMPWriterのメソッド
BMPファイルの生成 | |
---|---|
メソッド | TBMPWriter.SaveToFile(FileName) |
引数 | FileName : 出力するファイル名 |
戻り値 | なし |
実行例(demo.html)

demo.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="BMP.js"></script> <script> var src_img,dst_canvas,dst_ctx; window.onload = function () { src_img = document.getElementById("SrcImage"); dst_canvas = document.getElementById("DstCanvas"); dst_ctx = dst_canvas.getContext("2d"); } function save(){ // Generate ImageData // (ImageDataの生成) var imagedata = dst_ctx.getImageData(0,0,dst_canvas.width,dst_canvas.height); // Output in BMP format // (BMP形式で出力する) var BMPWriter = new TBMPWriter(imagedata); BMPWriter.SaveToFile('untitle.bmp'); } function OpenFile(event) { var files; var reader = new FileReader(); if(event.target.files){ files = event.target.files; }else{ files = event.dataTransfer.files; } reader.onload = function (event) { src_img.onload = function (){ dst_canvas.width = src_img.width; dst_canvas.height = src_img.height; dst_ctx.drawImage(src_img,0,0); }; src_img.onerror = function (){ alert('This file can not be read.'); run_flg = false; }; src_img.src = reader.result; }; if (files[0]){ reader.readAsDataURL(files[0]); document.getElementById("inputfile").value = ''; } } </script> </head> <body> <input type="file" id="inputfile" accept="image/jpeg,image/png,image/gif,image/bmp,image/x-icon" onchange="OpenFile(event);"> <button onclick="save();" style="font-size:24px;">Save</button> <p>[Original image]</p> <img id="SrcImage" style="display:none;"> <canvas id="DstCanvas"></canvas> </body> </html>
応用
このまま実行すると、JavaScriptはシングルスレッドですので重いです。そこで、HTML5の新機能であるWeb Workerを使用するとマルチスレッドで並列処理が可能です。
Web Workerの使い方はWeb Workerを使用してプログレスバーをマルチスレッドで動かすをご覧ください。
スポンサーリンク
関連記事
公開日:2017年05月23日
記事NO:02391
この記事を書いた人
![]() | 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
プチモンテ代表、アーティスト名:プチモンテ | |
🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は叙情詩、叙情的な楽曲が多い。楽曲制作は2023年12月中旬 ~ |
オリジナル曲を始めました✨
YouTubeで各楽曲を公開しています🌈
https://www.youtube.com/@petitmonte