fullgif2.htm

戻る

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML LANG="ja">

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<TITLE>フルカラー GIF 作成(Canvas 版)</TITLE>
</HEAD>

<BODY BGCOLOR="#CCFFFF">
<CENTER>
<BR>
<B>フルカラー GIF 作成(Canvas 版)</B>
<BR><BR>

<FORM>
<TABLE><TR><TD>
入力ファイル:<BR>
<INPUT TYPE=FILE ID="file" SIZE=60 onChange="in_sel()">
</TD></TR></TABLE>
<DIV STYLE="position:relative; width:100px; height:100px; background-color:white">
<IMG ID="in_img" WIDTH=1 HEIGHT=1 onLoad="in_sel2()" STYLE="position:absolute; visibility:hidden">
</DIV>
<SPAN ID="size"></SPAN>
<BR><BR>
<INPUT TYPE=BUTTON ID="cre" VALUE="作成" DISABLED onClick="create()">
<BR><BR>
<SPAN ID="info"></SPAN>
<BR>
<DIV STYLE="position:relative; width:100px; height:100px; background-color:white">
<IMG ID="out_img" WIDTH=1 HEIGHT=1 STYLE="position:absolute; visibility:hidden">
</DIV>
<TABLE><TR><TD>
<INPUT TYPE=BUTTON ID="view" VALUE="表示" DISABLED onClick="view_gif()">
<INPUT TYPE=BUTTON ID="save" VALUE="保存" DISABLED onClick="save_gif()">
</TD></TR></TABLE>
<BR><BR>
<SPAN ID="msg1"></SPAN>
<BR>
<SPAN ID="msg2"></SPAN>
<BR>
<INPUT TYPE=BUTTON ID="can" VALUE="中止" onClick="cancel = true" STYLE="visibility:hidden">
</FORM>

</CENTER>

<SCRIPT LANGUAGE="JavaScript1.5" TYPE="text/javascript">
<!--

function in_sel() {
  elem_in_img.style.visibility = "hidden";
  elem_size.textContent = "";
  elem_cre.disabled = true;
  elem_info.textContent = "";
  elem_out_img.style.visibility = "hidden";
  elem_view.disabled = true;
  elem_save.disabled = true;

  if(elem_file.files == undefined) {
    elem_in_img.src = "file:///" + elem_file.value;
  }
  else {
    if(typeof FileReader == "function") {
      file_reader = new FileReader();
      file_reader.onload = in_sel_fr;
      file_reader.readAsDataURL(elem_file.files.item(0));
    }
    else {
      elem_in_img.src = elem_file.files.item(0).getAsDataURL();
    }
  }
}

function in_sel_fr() {
  elem_in_img.src = file_reader.result;
  file_reader = undefined;
}

function in_sel2() {
  img_width  = elem_in_img.naturalWidth;
  img_height = elem_in_img.naturalHeight;

  // 入力画像サムネイル表示
  with(elem_in_img) {
    if(img_width > 100 || img_height > 100) {
      if(img_width > img_height) {
        width = 100;
        height = Math.floor(100 * img_height / img_width);
      }
      else {
        height = 100;
        width = Math.floor(100 * img_width / img_height);
      }
    }
    else {
      width  = img_width;
      height = img_height;
    }
    style.left = String((100 - width)  >> 1) + "px";
    style.top  = String((100 - height) >> 1) + "px";
    style.visibility = "visible";
  }
  elem_size.textContent = String(img_width) + "x" + String(img_height);

  elem_cre.disabled = false;
}

// 作成開始
function create() {
  elem_cre.disabled = true;
  elem_view.disabled = true;
  elem_save.disabled = true;

  elem_work.width  = Math.floor(img_width  / dpu_x);
  elem_work.height = Math.floor(img_height / dpu_y);
  ctx_work.globalCompositeOperation = "copy";
  ctx_work.drawImage(elem_in_img, 0, 0, elem_work.width, elem_work.height);
  with(ctx_work.getImageData(0, 0, elem_work.width, elem_work.height)) {
    img_width  = width;
    img_height = height;
    img_data = data;
  }

  i_data = 0;

  // 画像 インデックス配列
  pixels = new Array();
  pixels.length = img_height;
  for(i = 0; i < img_height; i++) {
    pixels[i] = new Array();
    pixels[i].length = img_width;
  }

  colors = "";
  frames = [];

  elem_msg1.textContent = "色情報収集中...";
  elem_can.style.visibility = "visible";
  cancel = false;
  setTimeout(color_index, 0, 0);
}

// 表示
function view_gif() {
  open("data:image/gif;base64," + gif_data, "view");
}

// 保存
function save_gif() {
  location.href = "data:application/octet-stream;base64," + gif_data;
}

//----------------------------------------------------------

// カラー テーブル作成 & インデックス化
function color_index(y) {
  if(cancel) {
    end_proc();
    return;
  }

  // 色集積 & インデックス化
  for(var x = 0; x < img_width; x++) {
    if(img_data[i_data + 3]) {  // アルファ チャネルが 0 以外
      var color = String.fromCharCode(((img_data[i_data] & 0x0f) << 8) | img_data[i_data + 1])
                + String.fromCharCode(((img_data[i_data] & 0xf0) << 4) | img_data[i_data + 2] | 0x1000);
      var i = colors.lastIndexOf(color);
      if(i == -1) {
        i = colors.length;
        if(i == 131072 /* 65536*2 */) {
          alert("使用色数が多すぎます。");
          end_proc();
          return;
        }
        colors += color;
        if(!(i % 510 /* 255*2 */))  // フレーム数増加
        //frames.push({x_min:Infinity, y_min:y, x_max:0, y_max:0});
          // IE 対策
          // IE では,フレームの幅が画像全体の幅と一致していないと表示が一部欠ける
          frames.push({x_min:0, y_min:y, x_max:img_width - 1, y_max:0});
      }
      pixels[y][x] = i >> 1;

      with(frames[Math.floor(i / 510 /* 255*2 */)]) {
        y_max = y;
        if(x < x_min)
          x_min = x;
        if(x > x_max)
          x_max = x;
      }
    }
    else {
      pixels[y][x] = -1;  // すべてのフレームで透過になる
    }
    i_data += 4;
  }

  if(++y == img_height) {
    img_data = undefined;

    create_gif();
  }
  else {
    setTimeout(color_index, 0, y);
  }
}

//----------------------------------------------------------

// GIF 作成
function create_gif() {
  if(!colors.length) {
    alert("使用色数が 0 です。");
    end_proc();
    return;
  }
  if(colors.length <= 512) {
    if(!confirm("使用色数が 256 以下です。GIF 作成を続けますか?")) {
      end_proc();
      return;
    }
  }

  elem_info.textContent = String(colors.length >> 1) + "色 " + String(frames.length) + "フレーム";
  elem_msg1.textContent = "GIF 画像作成中...";
  setTimeout(create_gif2, 0);
}

function create_gif2() {
  gif_data = "";
  b64_buff = "";

  gif_header[I_SCREEN_WIDTH     ] = img_width & 0xff;
  gif_header[I_SCREEN_WIDTH  + 1] = img_width >> 8;
  gif_header[I_SCREEN_HEIGHT    ] = img_height & 0xff;
  gif_header[I_SCREEN_HEIGHT + 1] = img_height >> 8;
  // Header,Logical Screen Descriptor
  for(var i = 0; i < gif_header.length; i++)
    putc(gif_header[i]);

  i_color = 0;
  i_frame = 0;
  create_gif_frame();
}

// GIF 1 フレーム出力
function create_gif_frame() {
  if(cancel) {
    end_proc();
    return;
  }

  with(frames[i_frame]) {
    gif_frame[I_IMAGE_LEFT    ] = x_min & 0xff;
    gif_frame[I_IMAGE_LEFT + 1] = x_min >> 8;
    gif_frame[I_IMAGE_TOP     ] = y_min & 0xff;
    gif_frame[I_IMAGE_TOP  + 1] = y_min >> 8;
    var w = x_max - x_min + 1;
    gif_frame[I_IMAGE_WIDTH     ] = w & 0xff;
    gif_frame[I_IMAGE_WIDTH  + 1] = w >> 8;
    w = y_max - y_min + 1;
    gif_frame[I_IMAGE_HEIGHT    ] = w & 0xff;
    gif_frame[I_IMAGE_HEIGHT + 1] = w >> 8;
  }

  elem_msg2.textContent = "フレーム " + String(i_frame + 1) + "/" + String(frames.length);
  setTimeout(create_gif_frame2, 0);
}

function create_gif_frame2() {
  var i;

  // Graphic Control Extension,Image Descriptor
  gif_frame[I_DELAY_TIME] = gif_frame[I_DELAY_TIME + 1] = (i_frame + 1 < frames.length) ? 0x00 : 0xff;
                                                                                // 最終フレームのみ 65535,他は 0
  for(i = 0; i < gif_frame.length; i++)
    putc(gif_frame[i]);
  // Local Color Table
  i = i_color << 1;
  for(var cnt = 255; cnt; cnt--) {
    if(i == colors.length) {  // 色テーブル終了
      // ダミー
      for(cnt *= 3; cnt; cnt--)
        putc(0);
      break;
    }
    var c1 = colors.charCodeAt(i++);
    var c2 = colors.charCodeAt(i++);
    putc((c1 >> 8) | ((c2 & 0xf00) >> 4));  // R
    putc(c1 & 0xff);  // G
    putc(c2 & 0xff);  // B
  }
  putc(0);
  putc(0);
  putc(0);

  // LZW Minimum Code Size
  putc(8);  // 8 ビット

  // 辞書ルート初期化
  for(i = 0; i < 256; i++) {
    root_prop[i].chara = undefined;
    root_prop[i].prop = undefined;
  }

  block_cnt = 0;

  pack_buff = 0;
  pack_bits = 0;

  code_bits = 9;
  max_n = 512;
  n_code = 258;

  put_code(256);  // Clear

  with(frames[i_frame]) {
    dict_code = pixels[y_min][x_min] - i_color;
  }
  // 0 〜 254 以外は透過(255 はそのままでよい)
  if(dict_code & ~0xff)
    dict_code = 255;
  dict_prop = root_prop[dict_code];

  setTimeout(create_gif_frame3, 0, frames[i_frame].y_min);
}

function create_gif_frame3(y) {
  if(cancel) {
    end_proc();
    return;
  }

  var frame = frames[i_frame];
  var x = frame.x_min;
  if(y == frame.y_min)
    x++;

  while(x <= frame.x_max) {
    // 次の 1 ピクセル
    var c = pixels[y][x++] - i_color;
    // 0 〜 254 以外は透過(255 はそのままでよい)
    if(c & ~0xff)
      c = 255;

    var cs = String.fromCharCode(c);
    // 辞書サーチ
    var i = -1;
    if(dict_prop.chara != undefined)
      i = dict_prop.chara.indexOf(cs);
    if(i == -1) {  // 未登録
      put_code(dict_code);

      if(n_code == 4095) {  // 辞書が一杯(のひとつ前)
        // 辞書クリア
        put_code(256);  // Clear

        for(i = 0; i < 256; i++) {
          root_prop[i].chara = undefined;
          root_prop[i].prop = undefined;
        }
        n_code = 258;
        code_bits = 9;
        max_n = 512;
      }
      else {
        // 辞書に登録
        if(dict_prop.chara == undefined) {
          dict_prop.chara = cs;
          dict_prop.prop = [{code:n_code, chara:undefined, prop:undefined}];
        }
        else {
          dict_prop.chara += cs;
          dict_prop.prop.push({code:n_code, chara:undefined, prop:undefined});
        }
        if(n_code++ == max_n) {
          code_bits++;
          max_n <<= 1;
        }
      }
      dict_code = c;
      dict_prop = root_prop[c];
    }
    else {  // 登録済み
      dict_code = dict_prop.prop[i].code;
      dict_prop = dict_prop.prop[i];
    }
  }

  if(y == frame.y_max)
    create_gif_frame4();
  else
    setTimeout(create_gif_frame3, 0, y + 1);
}

function create_gif_frame4() {
  put_code(dict_code);  // 最後のコード
  put_code(257);  // End of Information
  // コード パック用バッファ フラッシュ
  if(pack_bits)
    put_code(0);

  // ブロック バッファ フラッシュ
  if(block_cnt) {
    putc(block_cnt);
    for(var i = 0; i < block_cnt; i++)
      putc(block_buff[i]);
  }

  putc(0x00);  // Block Terminator

  if(++i_frame < frames.length) {
    i_color += 255;
    create_gif_frame();
    return;
  }

  putc(0x3b);  // Trailer

  // BASE64 バッファ フラッシュ
  if(b64_buff.length)
    gif_data += btoa(b64_buff);

  // GIF サムネイル表示
  elem_out_img.width  = elem_in_img.width;
  elem_out_img.height = elem_in_img.height;
  elem_out_img.style.left = elem_in_img.style.left;
  elem_out_img.style.top  = elem_in_img.style.top;
  elem_out_img.src = "data:image/gif;base64," + gif_data;
  elem_out_img.style.visibility = "visible";

  end_proc();
  elem_view.disabled = false;
  elem_save.disabled = false;
}

// LZW コード出力
function put_code(code) {
  pack_buff |= code << pack_bits;
  pack_bits += code_bits;
  while(pack_bits >= 8) {
    block_buff[block_cnt++] = pack_buff & 0xff;
    if(block_cnt == 255) {
      putc(255);
      for(var i = 0; i < 255; i++)
        putc(block_buff[i]);
      block_cnt = 0;
    }
    pack_buff >>= 8;
    pack_bits -= 8;
  }
}

// イメージ データに 1 バイト出力
function putc(c) {
  b64_buff += String.fromCharCode(c);
  if(b64_buff.length == 3) {
    gif_data += btoa(b64_buff);
    b64_buff = "";
  }
}

//----------------------------------------------------------

// 作成終了
function end_proc() {
  img_data = undefined;
  colors = undefined;
  frames = undefined;
  pixels = undefined;
  for(var i = 0; i < 256; i++) {
    root_prop[i].chara = undefined;
    root_prop[i].prop = undefined;
  }

  elem_msg1.textContent = "";
  elem_msg2.textContent = "";
  elem_can.style.visibility = "hidden";

  elem_cre.disabled = false;
}

//----------------------------------------------------------

  var img_width;   // Width
  var img_height;  // Height
  var img_data;  // 入力データ
  var cancel;  // 中止フラグ
  var i_data;  // データ インデックス

  var colors;  // 色テーブル
  var frames;  // フレーム領域
  var pixels;  // 画像 インデックス配列
  var i_color;  // 色テーブル インデックス
  var i_frame;  // フレーム インデックス

  // Header,Logical Screen Descriptor
  gif_header = [
    0x47, 0x49, 0x46, 0x38, 0x39, 0x61,  // GIF89a
    0x00, 0x00, 0x00, 0x00,
    0x77,                                // 8 ビット,256色
    0x00,                                // Background Color Index
    0x00                                 // Pixel Aspect Ratio
  ];
  I_SCREEN_WIDTH = 6;
  I_SCREEN_HEIGHT = 8;
  // Graphic Control Extension,Image Descriptor
  gif_frame = [
    0x21,                                // Extension Introducer
    0xf9,                                // Graphic Control Label
    4,                                   // Block Size
    0x05,                                // Do not dispose,Transparent Color
    0x00, 0x00,
    255,                                 // Transparent Color Index
    0,                                   // Block Terminator
    0x2c,                                // Image Separator
    0x00, 0x00, 0x00, 0x00,
    0x00, 0x00, 0x00, 0x00,
    0x87,                                // Local Color Table,256色
  ];
  I_DELAY_TIME = 4;
  I_IMAGE_LEFT = 9;
  I_IMAGE_TOP = 11;
  I_IMAGE_WIDTH = 13;
  I_IMAGE_HEIGHT = 15;

  // 辞書ルート
  root_prop = new Array();
  root_prop.length = 256;
  for(i = 0; i < 256; i++)
    root_prop[i] = {chara:undefined, prop:undefined};

  var n_code;  // コード登録数
  var code_bits;  // コード ビット数
  var max_n;  // 最大コード登録数
  var dict_code;  // コード
  var dict_prop;  // 辞書情報
  var pack_buff;  // コード パック用バッファ
  var pack_bits;  // コード パック用バッファ格納ビット数
  block_buff = new Array();  // ブロック バッファ
  block_buff.length = 255;
  var block_cnt;             // ブロック バッファ格納バイト数
  var gif_data;  // GIF イメージ データ
  var b64_buff;  // BASE64 バッファ

  elem_file = document.getElementById("file");
  elem_in_img = document.getElementById("in_img");
  elem_size = document.getElementById("size");
  elem_cre = document.getElementById("cre");
  elem_out_img = document.getElementById("out_img");
  elem_info = document.getElementById("info");
  elem_view = document.getElementById("view");
  elem_save = document.getElementById("save");
  elem_msg1 = document.getElementById("msg1");
  elem_msg2 = document.getElementById("msg2");
  elem_can = document.getElementById("can");

  // 作業用 Canvas
  elem_work = document.createElement("CANVAS");
  ctx_work = elem_work.getContext("2d");
  elem_work.width  = 1000;
  elem_work.height = 1000;
  dpu_x = ctx_work.getImageData(0, 0, 1000, 1).width  / 1000;
  dpu_y = ctx_work.getImageData(0, 0, 1, 1000).height / 1000;

  document.forms[0].reset();  // ページを再ロードしたとき,「入力ファイル」項目の内容が残ってしまうため

  if(elem_file.files == undefined) {
    if(location.protocol != "file:")
      alert("お使いのブラウザでは、このプログラムをオンラインで実行することはできません。\n"
          + "プログラムをダウンロードして、ローカルのストレージから起動してください。");
  }

//-->
</SCRIPT>

</BODY>

</HTML>