2色/4色/16色/256色に対応したPNGファイルを生成する[PNG.js]
HTML5ではCanvas.toDataURL("image/png")で32bitのPNGファイルを作成できますが「2色/4色/16色/256色」のPNGファイルは作成できません。
オープンソースの「PNG.js」を使えば、お手軽に「2色/4色/16色/256色」のPNGファイルを生成できます。
※画像を256色以下に減色をする場合は「MedianCut.js」をご覧ください。
ブラウザがChromeの場合は、Chromeのセキュリティ仕様でローカルで実行するとエラーが発生します。回避策はサーバーにHTMLファイルをアップするか、エラー回避方法をご覧ください。
ダウンロード
PNG.js
ダウンロードの方法がわからない方はこちらからです。
PNG.jsの使い方
「TPNGWriter」クラスを使用してPNGファイルを生成します。
TPNGWriterのコンストラクタでCanvasのImageDataオブジェクトを指定して、TPNGWriter.SaveToFile()でファイルを作成するだけです。
※対応色数は2色/4色/16色/256色/24bitです。(自動認識)
TPNGWriterのコンストラクタ
| クラスを生成 | |
|---|---|
| コンストラクタ | new TPNGWriter(imagedata) |
| 引数 | imagedata: ImageData オブジェクト |
| 戻り値 | TPNGWriterオブジェクト |
TPNGWriterのメソッド
| PNGファイルの生成 | |
|---|---|
| メソッド | TPNGWriter.SaveToFile(FileName,r,g,b) |
| 引数 | FileName : 出力するファイル名 r : (省略可能)背景を透過する色(Red) 0-255 g : (省略可能)背景を透過する色(Green) 0-255 b : (省略可能)背景を透過する色(Blue) 0-255 |
| 戻り値 | なし |
画像の色数が256色より多い場合は24bitで保存されます。その場合は圧縮率と圧縮時間の問題でCanvas.toDataURL()のご利用を推奨します。
実行例(demo.html)
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="zlib.min.js"></script>
<script src="PNG.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 PNG format
// (PNG形式で出力する)
var PNGWriter = new TPNGWriter(imagedata);
PNGWriter.SaveToFile('untitle.png');
}
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：02392
プチモンテ ※この記事を書いた人
 | |
| 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
| 🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～ | |
