Javascript 在没有DOM元素的情况下调整图像大小？

我刚刚写了一篇文章，将上传的图片调整到画布缩略图中。调整图像大小时，会减慢网页的其余部分

我刚刚发现，我希望通过将调整大小的任务移动到中来缓解这个问题

MDN文章说您不能访问DOM，这很好，但我希望我仍然可以创建DOM元素并返回画布

但是，

图像

对象似乎并不存在于我的工作线程中。Chrome告诉我：

未捕获引用错误：未定义图像。js:4

所以。。。有没有一种不用这些元素就能做到这一点的方法？我只想处理图像数据，然后以可用的形式将其传递回主线程。我并不真正关心DOM元素本身，但我不确定JSAPI是否给了我任何其他选项

---

我当前的调整大小方法，需要访问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);
},

resizeImage:function（文件、宽度、高度、回调）{
var reader=new FileReader（）；
reader.onload=函数（fileLoadEvent）{
var img=新图像（）；
img.onload=函数（）{
var srcX=0，srcY=0，srcWidth=img.width，srcHeight=img.height，比值=1；
var srcRatio=img.宽度/img.高度；
比值=宽度/高度；
if（srcRatio

如果你真的在这里发布“小脚本”和一个演示，效果会更好。@JosephDreamer：“小脚本”是超链接的，但如果它让你高兴，我会复制到问题中。我没有发现它是完全相关的，因为它在编写时有点无用（使用DOM元素）。工作演示有点难以提供，因为我的本地设置相当复杂，我不确定是否有允许XHR文件上载的小提琴。您可能想在此处查看答案，但基本上，您可能会遇到问题，因为webworkers通过复制而不是引用进行通信：。有关更多信息，请查看此链接中的“传递数据”：看起来Chrome 17和FF 18都支持可转移对象（），因此我认为文件复制不再是一个问题。然而，缺少DOM元素仍然是一个障碍。