Question

我刚刚写了一个little script，它将上传的图片大小调整为画布缩略图。在调整图像大小时，它会减慢网页的其余部分。

我刚刚发现web workers我希望通过将调整大小的任务移到background来解决此问题。

MDN文章说你无法访问DOM，这很好，但我希望我仍然可以创建 DOM元素并传回画布。

但是，Image对象似乎甚至不存在于我的工作线程内部。 Chrome告诉我：

未捕获的ReferenceError：图像未定义resize_image.js：4

那么......有没有办法在不使用这些元素的情况下做到这一点？我只是想操纵图像数据，然后以可用的形式将其传递回主线程。我真的不关心DOM元素本身，但我不确定JS API是否给了我任何其他选项？

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

没有DOM元素调整图像大小？

0 个答案: