javascript - DOM要素なしで画像のサイズを変更しますか?

Question

アップロードされた画像のサイズをキャンバスのサムネイルに変更する小さなスクリプトを書きました。画像のサイズを変更すると、Web ページの残りの部分が遅くなります。

サイズ変更タスクをバックグラウンドに移動することで、この問題を軽減するために使用できることを望んでいたWeb ワーカーを発見しました。

MDN の記事には、DOM にアクセスできないと書かれていますが、これは問題ありませんが、それでもDOM 要素を作成してキャンバスを返すことができることを望んでいました。

ただし、Imageオブジェクトはワーカー スレッド内からは存在していないようです。クロムは私に言います：

Uncaught ReferenceError: 画像が定義されていません resize_image.js:4

それで...これらの要素を使用せずにこれを行う方法はありますか? 画像データを操作して、使用可能な形式でメイン スレッドに戻したいだけです。DOM 要素自体はあまり気にしませんが、JS API が他のオプションを提供するかどうかはわかりません。

---

DOM要素へのアクセスを必要とする私の現在のサイズ変更方法：

resizeImage: function(file, width, height, callback) {
    var reader = new FileReader();
    reader.onload = function (fileLoadEvent) {
        var img = new Image();
        img.onload = function() {
            var srcX = 0, srcY = 0, srcWidth = img.width, srcHeight = img.height, ratio=1;

            var srcRatio = img.width/img.height;
            var dstRatio = width/height;
            if(srcRatio < dstRatio) {
                ratio = img.width/width;
                srcHeight = height*ratio;
                srcY = (img.height-srcHeight)/2;
            } else {
                ratio = img.height/height;
                srcWidth = width*ratio;
                srcX = (img.width-srcWidth)/2;
            }

            var canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(this, srcX, srcY, srcWidth, srcHeight, 0, 0, width, height);

            callback(canvas);
        };
        img.src = reader.result;
    };
    reader.readAsDataURL(file);
},