async awaitで画像を読み込み canvasに描画 JavaScript
2019-06-234 min read
目次
概要
async await Promise を使ってブラウザにアップロードした画像をcanvasに非同期で描画するサンプルの紹介です。 onloadメソッド縛りで実装すると非同期地獄になりますが、async await を使うことによりすっきりと書くことができました。
async
async について
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
サンプルコード
解説 アップロードされたファイルをImageオブジェクトとして読み込みます。 画像の読み込みが完了したら、canvasに画像を描画します。 ソース
function load(canvas, file) {
return new Promise((resolve, reject) => {
let ctx = canvas.getContext('2d');
let image = new Image();
let reader = new FileReader();
reader.onload = e => {
image.src = e.target.result;
image.onload = () => {
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
resolve(image);
};
};
reader.readAsDataURL(file);
});
}
async function onChange(file) {
const canvas = document.getElementById(canvasId);
await load(canvas, file);
alert('読み込み完了!');
}
document.getElementById('input').addEventListener('change', (e) => {
onChange(e.target.files[0]);
}, false);
デモ OpenCV.jsを組み合わせたものです。 上記のサンプルコードとは若干異なりますが、同様の動作をします。
Recommends
New Posts
Hot posts!
Date
Tags
(110)
(54)
(54)
(47)
(45)
(36)
(30)
(29)
(24)
(24)
(22)
(21)
(21)
(20)
(19)
(17)
(16)
(16)
(15)
(14)
(12)
(12)
(12)
(12)
(12)
(12)
(11)
(10)
(10)
(10)
(10)
(10)
(9)
(9)
(8)
(8)
(8)
(8)
(7)
(7)
(6)
(6)
(6)
(6)
(6)
(5)
(5)
(5)
(5)
(4)
Author