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

GIFファイルを出力する「GIF.js」の使い方[公式]

JavaScriptでGIFファイルを出力する「GIF.js」の使い方です。

ブラウザがChromeの場合は、Chromeのセキュリティ仕様でローカルで実行するとエラーが発生します。回避策はサーバーにHTMLファイルをアップするか、エラー回避方法をご覧ください。

対応状況

GIF形式の全ての色数(2色、4色、8色、16色、32色、64色、128色、256色)に対応。その他に背景を透過する透明色の設定にも対応しています。

画像の色数が256色より多い場合は、付属するTMedianCutで256色以下に減色する事が可能です。

ダウンロード

GIF.js
ダウンロードの方法がわからない方はこちらからです。

使い方

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="GIF.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); 
  
  // Obtain color information of image 
  // (画像のカラー情報の取得)
  var colors = getColorInfo(imagedata);
  
  // Reduce the color to 256 colors 
  // when the number of colors of the image is larger than 256 colors
  // (画像の色数が256色より多い場合は256色に減色する)
  if(colors.length > 256){
    var MedianCut = new TMedianCut(imagedata,colors);
    MedianCut.run(256,true);
  } 
  
  // Output in GIF format 
  // (GIF形式で出力する)
  var GIFWriter = new TGIFWriter(imagedata);
  GIFWriter.SaveToFile('untitle.gif');
}  

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>

関数

画像のカラー情報を取得する
関数function getColorInfo(imagedata)
引数imagedata: ImageDataオブジェクト
戻り値カラー情報のオブジェクト

コンストラクタ

クラスを生成
コンストラクタnew TGIFWriter(imagedata)
引数imagedata : ImageDataオブジェクト
戻り値TGIFWriterオブジェクト

メソッド

GIFファイルの生成
メソッドTGIFWriter.SaveToFile(FileName, r, g, b)
引数FileName : 出力するファイル名
r : (省略可能)背景を透過する色(0 - 255)
g : (省略可能)背景を透過する色(0 - 255)
b : (省略可能)背景を透過する色(0 - 255)
戻り値なし
備考背景色を透過する透明色は1色のみ指定可能です。
※r/g/bで1つの色となります。

※TMedianCutは画像を高品質に減色する「MedianCut.js」の使い方をご覧ください。

応用

このまま関数を実行すると、JavaScriptはシングルスレッドですので重いです。そこで、HTML5の新機能であるWeb Workerを使用するとマルチスレッドで並列処理が可能です。

Web Workerの使い方はWeb Workerを使用してプログレスバーをマルチスレッドで動かすをご覧ください。





関連記事


前の記事：画像を高品質に減色する「MedianCut.js」の使い方[公式]
次の記事：複数画像をGIFアニメに変換する「GIFAnime.js」の使い方[公式]

公開日：2016年12月15日
記事NO：02229


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)