スポンサーリンク

async awaitで画像を読み込み canvasに描画 JavaScript

スポンサーリンク
HTML
スポンサーリンク

スポンサーリンク

概要

async await Promise を使ってブラウザにアップロードした画像をcanvasに非同期で描画するサンプルの紹介です。
onloadメソッド縛りで実装すると非同期地獄になりますが、async await を使うことによりすっきりと書くことができました。

async

async について

async function
このインタラクティブデモのソースは GitHub のリポジトリに格納されています。インタラクティブデモプロジェクトに協力したい場合は、 をクローンしてプルリクエストを送ってください。

サンプルコード

解説
アップロードされたファイルを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を組み合わせたものです。
上記のサンプルコードとは若干異なりますが、同様の動作をします。

JSFiddle
HTMLJavaScript
スポンサーリンク
スポンサーリンク
スポンサーリンク
404 Motivation Not Found
タイトルとURLをコピーしました