概要
今画像ファイルをパスワードとして用いることのできるのモジュールをGithubで作っているけども、画像ファイルをcookieみたいに保存し、それをcanvasにする方法がないか探したところlocalStorageなるHTML5用のすごい機能を発見
しかし実際にlocalStorageに画像ファイルを放り込んだり、放り込んだ画像ファイルをcanvasとして読み込む方法を書いた日本語の資料があんまり見当たらない
というわけで備忘も兼ねてQiitaに書いてみる
fileタイプのinput→localStorage
案外見当たらないので調べるのに苦労したが、英語の資料にそれっぽいのがあった
もう少し効率的なソースがあると思うので、ありましたらコメントお願いします
<!DOCTYPE html>
<html>
<script>
function readFile() {
var inputTag = document.getElementById('inputFile');
var reader = new FileReader();
reader.onload = function() {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width=img.width;
canvas.height=img.height;
context.drawImage(img,0,0);
localStorage.setItem("hoge", canvas.toDataURL());
};
img.src=reader.result;
};
reader.readAsDataURL(inputTag.files[0]);
}
</script>
<body>
<form>
<input type='file' id='inputFile' onchanged="readFile();"></input>
</form>
</body>
</html>
localStorage→canvas
どういう形式で保存されているのか、getItemで取得した内容をconsole.logで出力するとBase64だったことが判明
なのでimg.srcにgetItemの戻り値を指定することを試してみると、ものの見事に成功
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width=img.width;
canvas.height=img.height;
context.drawImage(img,0,0);
}
img.src=localStorage.getItem("hoge");
参考資料
https://qiita.com/yasumodev/items/e1708f01ff87692185cd
https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/