HTML5在上传之前预先调整图像大小

Question

HTML5在上传之前预先调整图像大小

Jim*_*988 177 upload html5 image xmlhttprequest local-storage

这是面条刮痕.

请记住,我们有HTML5本地存储和xhr v2,什么不是.我想知道是否有人能找到一个有效的例子,甚至只是给我一个是或否的问题:

是否可以使用新的本地存储(或其他)预先调整图像大小,以便没有关于调整图像大小的线索的用户可以将他们的10mb图像拖到我的网站中,然后使用新的本地存储调整大小.然后以较小的尺寸上传它.

我完全知道你可以用Flash,Java小程序,活动X来做...问题是如果你能用Javascript + Html5做.

期待对此的回应.

Ta现在.

Answer 1

rob*_*rtc 175

是的,使用File API,然后您可以使用canvas元素处理图像.

这篇Mozilla Hacks博客文章将指导您完成大部分过程.这里参考的是博客文章中汇编的源代码:

// from an input element
var filesToUpload = input.files;
var file = filesToUpload[0];

var img = document.createElement("img");
var reader = new FileReader();  
reader.onload = function(e) {img.src = e.target.result}
reader.readAsDataURL(file);

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

var dataurl = canvas.toDataURL("image/png");

//Post dataurl to the server with AJAX

Run Code Online (Sandbox Code Playgroud)

您应该等待图像上的`onload`(附加处理程序_before_设置`src`),因为允许浏览器异步解码,并且在'drawImage`之前像素可能不可用. (32认同)
为什么谢谢你,先生.今晚我将有一场比赛......文件api是.我将拖放上传工作了,我意识到这也是一个非常好的功能.YIPPEE. (6认同)
您可能希望将画布代码放入文件阅读器的onload函数中 - 在您接近结尾的ctx.drawImage()之前,有可能无法加载大图像. (6认同)
要小心,你需要额外的魔力让它在IOS上运行:http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios (4认同)
我们不需要使用mycanvas.toDataURL("image/jpeg",0.5)来确保提高质量以减小文件大小.我在mozilla博客文章中看到了这个评论,看到了这里的bug解析https://bugzilla.mozilla.org/show_bug.cgi?id=564388 (3认同)
您可以使用**synchronous**`URL.createObjectURL(File)`而不是异步的`FileReader.readAsDataURL(File)`来创建图像的URL. (2认同)
`var ctx = canvas.getContext（“ 2d”）; //未捕获的ReferenceError：未定义canvas。您是否忘了定义“画布”？ (2认同)

Answer 2

Ros*_*ner 105

几年前我解决了这个问题,并将我的解决方案上传到github,如https://github.com/rossturner/HTML5-ImageUploader

robertc的回答使用了Mozilla Hacks博客文章中提出的解决方案,但是我发现当调整到不是2:1(或其倍数)的比例时,这给出了非常差的图像质量.我开始尝试不同的图像大小调整算法,虽然大多数最终都很慢,或者质量也不高.

最后,我提出了一个解决方案,我相信它可以快速执行并且具有相当不错的性能 - 因为Mozilla从1个画布复制到另一个画布的解决方案可以快速工作,并且在不损失图像质量的情况下以2:1的比例,给定x的目标像素宽和y像素高,我使用这个画布调整大小的方法,直到图像介于x和2 x之间,y和2 y.在这一点上,我转向算法图像大小调整,以调整大小到目标大小的最后"步骤".在尝试了几种不同的算法之后,我决定采用不再在线的博客进行双线性插值,但可以通过Internet Archive访问,这可以得到很好的结果,这里是适用的代码:

ImageUploader.prototype.scaleImage = function(img, completionCallback) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);

    while (canvas.width >= (2 * this.config.maxWidth)) {
        canvas = this.getHalfScaleCanvas(canvas);
    }

    if (canvas.width > this.config.maxWidth) {
        canvas = this.scaleCanvasWithAlgorithm(canvas);
    }

    var imageData = canvas.toDataURL('image/jpeg', this.config.quality);
    this.performUpload(imageData, completionCallback);
};

ImageUploader.prototype.scaleCanvasWithAlgorithm = function(canvas) {
    var scaledCanvas = document.createElement('canvas');

    var scale = this.config.maxWidth / canvas.width;

    scaledCanvas.width = canvas.width * scale;
    scaledCanvas.height = canvas.height * scale;

    var srcImgData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
    var destImgData = scaledCanvas.getContext('2d').createImageData(scaledCanvas.width, scaledCanvas.height);

    this.applyBilinearInterpolation(srcImgData, destImgData, scale);

    scaledCanvas.getContext('2d').putImageData(destImgData, 0, 0);

    return scaledCanvas;
};

ImageUploader.prototype.getHalfScaleCanvas = function(canvas) {
    var halfCanvas = document.createElement('canvas');
    halfCanvas.width = canvas.width / 2;
    halfCanvas.height = canvas.height / 2;

    halfCanvas.getContext('2d').drawImage(canvas, 0, 0, halfCanvas.width, halfCanvas.height);

    return halfCanvas;
};

ImageUploader.prototype.applyBilinearInterpolation = function(srcCanvasData, destCanvasData, scale) {
    function inner(f00, f10, f01, f11, x, y) {
        var un_x = 1.0 - x;
        var un_y = 1.0 - y;
        return (f00 * un_x * un_y + f10 * x * un_y + f01 * un_x * y + f11 * x * y);
    }
    var i, j;
    var iyv, iy0, iy1, ixv, ix0, ix1;
    var idxD, idxS00, idxS10, idxS01, idxS11;
    var dx, dy;
    var r, g, b, a;
    for (i = 0; i < destCanvasData.height; ++i) {
        iyv = i / scale;
        iy0 = Math.floor(iyv);
        // Math.ceil can go over bounds
        iy1 = (Math.ceil(iyv) > (srcCanvasData.height - 1) ? (srcCanvasData.height - 1) : Math.ceil(iyv));
        for (j = 0; j < destCanvasData.width; ++j) {
            ixv = j / scale;
            ix0 = Math.floor(ixv);
            // Math.ceil can go over bounds
            ix1 = (Math.ceil(ixv) > (srcCanvasData.width - 1) ? (srcCanvasData.width - 1) : Math.ceil(ixv));
            idxD = (j + destCanvasData.width * i) * 4;
            // matrix to vector indices
            idxS00 = (ix0 + srcCanvasData.width * iy0) * 4;
            idxS10 = (ix1 + srcCanvasData.width * iy0) * 4;
            idxS01 = (ix0 + srcCanvasData.width * iy1) * 4;
            idxS11 = (ix1 + srcCanvasData.width * iy1) * 4;
            // overall coordinates to unit square
            dx = ixv - ix0;
            dy = iyv - iy0;
            // I let the r, g, b, a on purpose for debugging
            r = inner(srcCanvasData.data[idxS00], srcCanvasData.data[idxS10], srcCanvasData.data[idxS01], srcCanvasData.data[idxS11], dx, dy);
            destCanvasData.data[idxD] = r;

            g = inner(srcCanvasData.data[idxS00 + 1], srcCanvasData.data[idxS10 + 1], srcCanvasData.data[idxS01 + 1], srcCanvasData.data[idxS11 + 1], dx, dy);
            destCanvasData.data[idxD + 1] = g;

            b = inner(srcCanvasData.data[idxS00 + 2], srcCanvasData.data[idxS10 + 2], srcCanvasData.data[idxS01 + 2], srcCanvasData.data[idxS11 + 2], dx, dy);
            destCanvasData.data[idxD + 2] = b;

            a = inner(srcCanvasData.data[idxS00 + 3], srcCanvasData.data[idxS10 + 3], srcCanvasData.data[idxS01 + 3], srcCanvasData.data[idxS11 + 3], dx, dy);
            destCanvasData.data[idxD + 3] = a;
        }
    }
};

Run Code Online (Sandbox Code Playgroud)

这会将图像缩小到宽度config.maxWidth,保持原始宽高比.在开发时,除了主要的桌面浏览器(IE9 +,Firefox,Chrome)之外,它还可以在iPad/iPhone Safari上运行,因此我认为,鉴于今天更广泛地采用HTML5,它仍将兼容.请注意,canvas.toDataURL()调用采用mime类型和图像质量,这将允许您控制质量和输出文件格式(如果您愿意,可能与输入不同).

唯一不包括的是维护方向信息,在不知道该元数据的情况下,图像被调整大小并按原样保存,丢失图像中的任何元数据以用于定向意味着在平板设备上拍摄的图像"颠倒"是这样渲染,虽然它们会在设备的相机取景器中翻转.如果这是一个问题,这篇博文有一个很好的指南和代码示例如何实现这一点,我敢肯定可以集成到上面的代码.

奖励你的赏金原因我觉得它增加了一堆答案,得到那个方向的东西集成虽然:) (4认同)
一个非常有用的灵魂现在合并了一些方向元数据的功能:) (3认同)

Answer 3

Jus*_*ene 25

以上更正:

<img src="" id="image">
<input id="input" type="file" onchange="handleFiles()">
<script>

function handleFiles()
{
    var filesToUpload = document.getElementById('input').files;
    var file = filesToUpload[0];

    // Create an image
    var img = document.createElement("img");
    // Create a file reader
    var reader = new FileReader();
    // Set the image once loaded into file reader
    reader.onload = function(e)
    {
        img.src = e.target.result;

        var canvas = document.createElement("canvas");
        //var canvas = $("<canvas>", {"id":"testing"})[0];
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 400;
        var MAX_HEIGHT = 300;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        var dataurl = canvas.toDataURL("image/png");
        document.getElementById('image').src = dataurl;     
    }
    // Load files into file reader
    reader.readAsDataURL(file);


    // Post the data
    /*
    var fd = new FormData();
    fd.append("name", "some_filename.jpg");
    fd.append("image", dataurl);
    fd.append("info", "lah_de_dah");
    */
}</script>

Run Code Online (Sandbox Code Playgroud)

将它添加到FormData()后,如何处理它的PHP部分？你不会寻找$ _FILES ['name'] ['tmp_name'] [$ i],例如？我正在尝试if(isset($ _ POST ['image']))...但是`dataurl`不在那里. (2认同)
第一次尝试上传图片时，它在Firefox上不起作用。下次尝试时，它会起作用。如何解决？ (2认同)
在Chrome浏览器中，当最初尝试访问img.width和img.height时，它们均为0。您应该将其余的函数放入img.addEventListener（'load'，function（）{//现在图像已加载，继续...}）;` (2认同)
@Justin您可以澄清“以上”，例如，此帖子的更正内容是什么？干杯 (2认同)

Answer 4

Wil*_*ill 14

Justin修改答案对我有用:

添加了img.onload
使用一个真实示例扩展POST请求


function handleFiles()
{
    var dataurl = null;
    var filesToUpload = document.getElementById('photo').files;
    var file = filesToUpload[0];

    // Create an image
    var img = document.createElement("img");
    // Create a file reader
    var reader = new FileReader();
    // Set the image once loaded into file reader
    reader.onload = function(e)
    {
        img.src = e.target.result;

        img.onload = function () {
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            var MAX_WIDTH = 800;
            var MAX_HEIGHT = 600;
            var width = img.width;
            var height = img.height;

            if (width > height) {
              if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
              }
            } else {
              if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
              }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            dataurl = canvas.toDataURL("image/jpeg");

            // Post the data
            var fd = new FormData();
            fd.append("name", "some_filename.jpg");
            fd.append("image", dataurl);
            fd.append("info", "lah_de_dah");
            $.ajax({
                url: '/ajax_photo',
                data: fd,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(data){
                    $('#form_photo')[0].reset();
                    location.reload();
                }
            });
        } // img.onload
    }
    // Load files into file reader
    reader.readAsDataURL(file);
}

Run Code Online (Sandbox Code Playgroud)

方向信息(exif)迷路了 (2认同)

Answer 5

jal*_*oso 9

打字稿

async resizeImg(file: Blob): Promise<Blob> {
    let img = document.createElement("img");
    img.src = await new Promise<any>(resolve => {
        let reader = new FileReader();
        reader.onload = (e: any) => resolve(e.target.result);
        reader.readAsDataURL(file);
    });
    await new Promise(resolve => img.onload = resolve)
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    let MAX_WIDTH = 1000;
    let MAX_HEIGHT = 1000;
    let width = img.naturalWidth;
    let height = img.naturalHeight;
    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    let result = await new Promise<Blob>(resolve => { canvas.toBlob(resolve, 'image/jpeg', 0.95); });
    return result;
}

Run Code Online (Sandbox Code Playgroud)

任何可能遇到这篇文章的人，在我看来，这个基于承诺的答案更加可靠。我转换为普通的 JS，它的工作方式就像一个魅力。 (2认同)

Answer 6

nan*_*eck 8

如果您不想重新发明轮子,可以尝试使用plupload.com

我还使用plupload进行客户端调整大小.关于它的最好的事情是它可以使用flash,html5,silverlight等.无论用户有什么,因为每个用户都有不同的设置.如果你只想要html5,那么我认为它不适用于一些旧的浏览器和Opera. (3认同)

Answer 7

小智 5

fd.append("image", dataurl);

Run Code Online (Sandbox Code Playgroud)

这不行.在PHP端,您无法使用此文件保存文件.

请改用此代码:

var blobBin = atob(dataurl.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
  array.push(blobBin.charCodeAt(i));
}
var file = new Blob([new Uint8Array(array)], {type: 'image/png', name: "avatar.png"});

fd.append("image", file); // blob file

Run Code Online (Sandbox Code Playgroud)

Answer 8

lau*_*gan 5

接受的答案很有效,但调整大小逻辑忽略了图像大于仅一个轴中的最大值的情况(例如,高度> maxHeight但宽度<= maxWidth).

我认为以下代码以更直接和功能性的方式处理所有情况(如果使用普通的javascript,则忽略typescript类型注释):

private scaleDownSize(width: number, height: number, maxWidth: number, maxHeight: number): {width: number, height: number} {
    if (width <= maxWidth && height <= maxHeight)
      return { width, height };
    else if (width / maxWidth > height / maxHeight)
      return { width: maxWidth, height: height * maxWidth / width};
    else
      return { width: width * maxHeight / height, height: maxHeight };
  }

Run Code Online (Sandbox Code Playgroud)

Answer 9

Iva*_*tin 5

在画布元素中调整图像大小通常是个坏主意，因为它使用最便宜的框插值。由此产生的图像质量明显下降。我建议使用http://nodeca.github.io/pica/demo/它可以代替执行 Lanczos 转换。上面的演示页面显示了 canvas 和 Lanczos 方法之间的区别。

它还使用网络工作者并行调整图像大小。还有WEBGL实现。

有一些在线图像调整器使用 pica 来完成这项工作，例如https://myimageresizer.com

归档时间：	13 年，7 月前
查看次数：	158477 次
最近记录：	6 年，8 月前