Help us understand the problem. What is going on with this article?

File APIを使ってJavaScriptで画像を読み込む。canvasを使って画像を出力

More than 1 year has passed since last update.

こちらに移行しました。→ 「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に画像が表示されます

参考

https://tech-blog.s-yoshiki.com/2018/01/10/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした