マルチアイコン(favicon.ico)から最大サイズの画像を取得したい

タイトルの通りですが、
マルチアイコン.icoは複数サイズのアイコンが含まれていることが多いと思いますが、
この中の大きいサイズの画像を取得したいと思います。

どのような方法があるでしょうか

行動規範の内容に同意します

回答3件

用途も何も触れられていませんが、単に画像ファイルとして（あるいは単独のアイコンとして）抽出したいだけであれば、

@icon変換 - 画像とアイコンの相互変換ツール。favicon作成にも。
http://www.towofu.net/soft/aicon.php

こういったツールをお使いになるのが良いかと思います。

それとは別に、技術的に面白そうだったので、

ICO(CUR) ファイルフォーマット
http://www.setsuki.com/hsp/ext/ico.htm

ファイルフォーマットに沿って、JavaScriptでバイナリからデータをぶっこ抜くということもしてみました。手元では何となく動いていましたが、お遊びですので保証などは一切ありません。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>sample</title>
6<style>
7body {
8  background-color: #999;
9}
10</style>
11</head>
12<body>
13
14<input type="file" id="ico">
15
16<h1>Canvasで読み込み（1つだけ）</h1>
17<canvas id="c" width="300" height="300"></canvas>
18
19<h1>imgで読み込み（全部）</h1>
20<div id="op"></div>
21
22
23<script>
24var ipt = document.querySelector("#ico");
25
26ipt.addEventListener("change", function() {
27  /*--------------------
28    .icoファイルを読み込んで解析する
29  --------------------*/
30  var ico = ipt.files[0];
31
32  var fr = new FileReader();
33  fr.addEventListener("load", function() {
34    var u   = new Uint8Array(fr.result);
35
36    var num = u[4];
37    //5バイト目：.icoに含まれるアイコンの数
38
39    var mIcon = [];
40    /*
41      icon解析用オブジェクト
42      [
43        {
44          header: (IconInfoHeader),
45          icon  : {
46            header: (BitmapInfoHeader),
47            imageData: (画像データ)
48          }
49        }, ...
50      ]
51    */
52
53    for(var i = 0; i < num; i++) {
54      var hStart = 6 + i * 16;
55      //各IconInfoHeaderの始点（.ico先頭7バイト目から16バイト単位で続く）
56
57      var iconObj = {};
58
59      iconObj.header = {};
60      iconObj.header.binary       = u.slice(hStart, hStart + 16);
61      iconObj.header.width        = u[hStart     ] || 256;
62      iconObj.header.height       = u[hStart +  1] || 256;
63      iconObj.header.icoDIBSize   = u[hStart +  8] + u[hStart +  9] * 256 + u[hStart + 10] * 256 * 256 +  + u[hStart + 11] * 256 * 256 * 256;
64      //IconInfoHeader09-12バイト目：サイズ（容量）
65      iconObj.header.icoDIBOffset = u[hStart + 12] + u[hStart + 13] * 256 + u[hStart + 14] * 256 * 256 +  + u[hStart + 15] * 256 * 256 * 256;
66      //IconInfoHeader13-16バイト目：位置（.icoファイル内でアイコンのデータ（ヘッダ含む）が何バイト目から始まっているか）
67
68      iconObj.icon = {};
69      iconObj.icon.binary    = u.slice(iconObj.header.icoDIBOffset, iconObj.header.icoDIBOffset + iconObj.header.icoDIBSize);
70      iconObj.icon.header    = u.slice(iconObj.header.icoDIBOffset, iconObj.header.icoDIBOffset + 40);
71      //BitmapInfoHeader（とりあえず使わないのでUint8Arrayのまま）
72      iconObj.icon.imageData = u.slice(iconObj.header.icoDIBOffset + 40, iconObj.header.icoDIBOffset + 40 + iconObj.header.width * iconObj.header.height * 4);
73      //ImageData（MaskDataは無視）
74      //（得られるバイナリはRGBAではなくBGRAの順（エンディアンの関係？））
75
76      mIcon.push(iconObj);
77    }
78
79    //サイズ順にソート（降順なので先頭が最大）
80    //（バイト数で比較しているので必ずしも解像度順とは限らない）
81    mIcon.sort(function(a, b) {
82      return b.header.icoDIBSize - a.header.icoDIBSize;
83    });
84
85    /*--------------------
86      パターン1：imageDataからcanvasに書き出す
87      （サイズが最大のもの1つだけ）
88    --------------------*/
89    var c     = document.querySelector("#c");
90    var ctx   = c.getContext("2d");
91
92    ctx.clearRect(0, 0, c.width, c.height);
93
94    console.dir(mIcon[0]);
95
96    c.width  = mIcon[0].header.width;
97    c.height = mIcon[0].header.height;
98
99    var image = ctx.createImageData(mIcon[0].header.width, mIcon[0].header.height);
100
101    //.icoはBGRA、canvasはRGBAなので4nバイト目と4n+2バイト目を入れ替える
102    for(i = 0; i < image.data.length; i = i + 4) {
103      image.data[i    ] = mIcon[0].icon.imageData[i + 2];
104      image.data[i + 1] = mIcon[0].icon.imageData[i + 1];
105      image.data[i + 2] = mIcon[0].icon.imageData[i    ];
106      image.data[i + 3] = mIcon[0].icon.imageData[i + 3];
107    }
108
109    window.createImageBitmap(image).then(function(bitmap) {
110      ctx.scale(1, -1);
111      //.icoのbitmapは下から上、canvasは上から下と逆方向なので上下反転させる
112      //（本来はBitmapInfoHeaderのbcHeightの正負で分岐）
113
114      ctx.drawImage(bitmap, 0, - mIcon[0].header.height);
115      ctx.setTransform(1, 0, 0, 1, 0, 0);
116    });
117
118    /*--------------------
119      パターン2：一括書き出し
120      （バイナリを結合して単一.ico化、DataURL、img要素にload）
121    --------------------*/
122    var op = document.querySelector("#op");
123    op.innerHTML = "";
124
125    for(i = 0; i < mIcon.length; i++) {
126      var img = document.createElement("img");
127
128      //単一の.icoファイルにするためIconFileHeader、IconInfoHeader、アイコンのデータの3つをmerge
129      var icoBinary = new Uint8Array(6 + mIcon[i].header.binary.length + mIcon[i].icon.binary.length);
130
131      icoBinary.set([0, 0, 1, 0, 1, 0], 0);      //IconFileHeader
132      icoBinary.set(mIcon[i].header.binary, 6);  //IconInfoHeader
133      icoBinary[18] = 22;                        //icoDIBOffsetを上書き（23バイト目に固定）
134      icoBinary[19] = 0;
135      icoBinary[20] = 0;
136      icoBinary[21] = 0;
137      icoBinary.set(mIcon[i].icon.binary, 6 + mIcon[i].header.binary.length);  //アイコンのデータ
138
139      //ArrayBufferをDataURLに変換
140      var dataUrl = "";
141      for(var b = 0; b < icoBinary.length; b++) {
142        dataUrl += String.fromCharCode(icoBinary[b]);
143      }
144      dataUrl = window.btoa(dataUrl);
145
146      //img要素に出力
147      img.src = "data:image/x-icon;base64," + dataUrl;
148      op.appendChild(img);
149    }
150  }, false);
151
152  fr.readAsArrayBuffer(ico);
153  //バイナリで読み込む
154}, false);
155</script>
156
157</body>
158</html>