ホーム > カテゴリ > HTML5・JavaScript >

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を使用してプログレスバーをマルチスレッドで動かすをご覧ください。





関連記事


前の記事：ビットマップファイルを生成する[BMP.js]
次の記事：Google検索に「自サイトのカテゴリ」を表示する構造化マークアップ[JSON-LD]

公開日：2017年05月23日
記事NO：02392