IOS6和Safari照片上传-文件API +画布+ jQuery Ajax异步上传和调整文件大小

Question

IOS6已发布，我一直在测试照片上传。

它的效果很好，但是在3G以上的大图像下，它的速度却很慢。

借助File API和Canvas，可以使用JavaScript调整图像大小。我希望，如果在尝试上传图像之前调整图像的大小，它们将更快地上传-
为快速的用户体验提供帮助。随着智能手机处理器以比网络速度快得多的速度增长，我相信这种解决方案是赢家。

但是，用jQuery的Ajax实现它最困难。感谢您提供任何建议或帮助，因为此代码对于IOS6之后的移动Web应用程序开发可能非常有用。

var fileType = file.type,
    reader = new FileReader();

reader.onloadend = function () {
    var image = new Image();
    image.src = reader.result;

    image.onload = function () {

        //Detect image size
        var maxWidth = 960,
            maxHeight = 960,
            imageWidth = image.width,
            imageHeight = image.height;
        if (imageWidth > imageHeight) {
            if (imageWidth > maxWidth) {
                imageHeight *= maxWidth / imageWidth;
                imageWidth = maxWidth;
            }
        } else {
            if (imageHeight > maxHeight) {
                imageWidth *= maxHeight / imageHeight;
                imageHeight = maxHeight;
            }
        }

        //Create canvas with new image
        var canvas = document.createElement('canvas');
        canvas.width = imageWidth;
        canvas.height = imageHeight;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

        // The resized file ready for upload
        var finalFile = canvas.toDataURL(fileType);

        if (formdata) {

            formdata.append("images[]", finalFile);

            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (res) {
                    //successful image upload
                }
            });

        }
    }
}
reader.readAsDataURL(file);

Answer 1

我刚刚开发了用于客户端 画布 图像大小调整的jQuery插件。它还处理 方向 和 iOS6压缩的图像 问题。

您可以尝试：http :
//gokercebeci.com/dev/canvasresize

用法：

$.canvasResize(file, {
               width   : 300,
               height  : 0,
               crop    : false,
               quality : 80,
               callback: function(dataURL, width, height){

                         // your code

               }
});