Excel/PowerPoint/Wordファイルから画像を取り出す Web サービスを作ってみた
Office 2007/2010/2013 の Excel/PowerPoint/Word ファイル（.xlsx・.pptx・.docx など）は、zip 形式で圧縮されていて、拡張子を .zip に変えると、使われている画像などのメディアファイルを簡単に取り出せます。
それと同じことをする、Web サービス を作ってみました。Web ブラウザーに Office ファイルをドロップすると、メディアファイルだけ残した zip ファイルを作成し、ダウンロードできます。
クライアント側の JavaScript で zip の展開をしているため、サーバーにはファイル情報を送っていません。
ファイルをコピーして拡張子を zip に変換して画像を取り出すのは、少しだけ手間ではありますが、はたして、このサイトを開いて画像を取り出すのとどっちが楽なのか……。
コード
JavaScript で、zip ファイルを扱える JSZip を使いました。
ファイルの中身を走査し、Office 文書のメディアフォルダー以外のものは、元の zip から削除することで、メディアファイルのみの zip を作っています（ファイルを取り出して再度 zip ファイルを作ると遅かったので）。
zip ファイルのダウンロード保存は、JSZip のサンプルでも使われている FileSaver.js を使っています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function ($) { | |
| $("#target").on("drop", function (evt) { | |
| // ファイルをドロップした場合 | |
| extractMedia(evt.originalEvent.dataTransfer.files); | |
| return false; | |
| }).on("dragenter", function () { | |
| return false; | |
| }).on("dragover", function () { | |
| return false; | |
| }).click(function () { | |
| // 画面をクリックした場合、ファイル選択のダイアログを開く | |
| $("#file").click(); | |
| return false; | |
| }); | |
| // ダイアログからファイルを選択した場合 | |
| $("#file").on("change", function (evt) { | |
| extractMedia(evt.target.files); | |
| }); | |
| // zip ファイル（Office 文書）から、メディアフォルダーのみ残す | |
| function extractMedia(files) { | |
| for (var i = 0, f; f = files[i]; i++) { | |
| var reader = new FileReader(); | |
| reader.onload = (function (theFile) { | |
| return function (e) { | |
| try { | |
| var count = 0; | |
| var zip = new JSZip(e.target.result); | |
| // zip の内容を走査 | |
| $.each(zip.files, function (index, zipEntry) { | |
| if (zipEntry.name.lastIndexOf('word/media/', 0) !== 0 && | |
| zipEntry.name.lastIndexOf('ppt/media/', 0) !== 0 && | |
| zipEntry.name.lastIndexOf('xl/media/', 0) !== 0) { | |
| zip.remove(zipEntry.name); | |
| } else { | |
| count++; | |
| } | |
| }); | |
| if (count > 0) { | |
| // メディアフォルダーがあった場合のみ、保存 | |
| var blob = zip.generate({ type: "blob" }); | |
| saveAs(blob, "media.zip"); | |
| } else { | |
| alert("メディアファイルは見つかりませんでした。"); | |
| } | |
| } catch (e) { | |
| alert("Error reading " + theFile.name + " : " + e.message); | |
| } | |
| } | |
| })(f); | |
| reader.readAsArrayBuffer(f); | |
| } | |
| } | |
| })(jQuery); |