こちらに移行しました。→ 「FileAPIで画像を読み込み → canvasに描画」 (2018/11/24)
#概要
JavaScriptとHTMLを使って画像を『読み込む』&『書き出す』という簡単なコードを記述します。
canvasとFile APIを使用します。
必要なものはhtmlとjsファイルとcanvasに対応したブラウザだけです。
#画像の読み込み
HTMLサイド
index.html
<input type="file" id="selfile">
JavaScriptサイド
.js
var dataUrl;
var objFile = document.getElementById("selfile");
objFile.addEventListener("change", function(evt) {
var file = evt.target.files;
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function() {
dataUrl = reader.result;
};
}, false);
dataUrlにはURL(文字列)が代入されます。
#画像の出力
.js
document.getElementById("xxx").innerHTML="<img src='"+dataUrl+"' alt='none'>";
/*xxxは任意のHTMLタグ*/
画像ファイルを読み込んだ後に実行します。
imgタグとして任意のタグの中に出力します。
注意
画像のサイズが大きくなると、読み込む時間が大きくなるため、これを考慮した関数を書く必要があります。
#Canvasを使って画像を出力
HTMLサイド
index.html
<canvas id="canvas">
画像を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
JavaScriptサイド
.js
function main() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var context = canvas.getContext('2d');
var image = new Image();
image.src = dataUrl;
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
}
}
main()が実行されるとcanvasに画像が表示されます