TypeScriptで画像をリサイズする

#概要
重い画像をサーバに送りたくなかったので、canvasを使ってリサイズする処理をTypeScriptで書きました。
コードは自由に使ってください。

#方法
指定したwidthに合わせてリサイズしています。
Blob形式の画像をわたすと、DataURL形式で返ってきますので
そのままimgのsrcなどに入れることもできます。

createObjectURLを使っているので、caniuse等で対応ブラウザのチェックをした方が良いかもしれません。

resize_util.ts

export class ResizeUtil {

    /** input等から取得したfileを、リサイズしdataUrlで返す */
    resize (file:Blob, imageWidth:number, afterAction:(dataUrl:string)=>void) {
        
        var canvas = document.createElement("canvas")
        var ctx = canvas.getContext('2d')
        var image = new Image()

        canvas.width = 0
        canvas.height = 0

        image.src = URL.createObjectURL(file)
        image.onload = ()=> {

            var w = imageWidth
            var h = image.height * (imageWidth/image.width)

            canvas.width = w
            canvas.height = h

            ctx.drawImage(image, 0, 0, w, h)

            afterAction(canvas.toDataURL(file.type))
        }
    }
}

使ってるほう

main.ts

let file = $('input').prop('files')[0]
let width = 300
let util = new Util.ResizeUtil()

util.resize(file, width, (dataUrl)=>{
    //imgのsrcとかにdataUrlを入れる
})

#参考
http://aoyama-tech.hatenadiary.com/entry/2015/08/21/220355
https://qiita.com/FiNGAHOLiC/items/4bddee7b0bfe9555636a