javascript - 通过Ajax调整图片大小并上传

Question

我有这段代码可以调整图像大小，我希望它在调整照片大小后上传并使用 Ajax 提交表单。我尝试这样做，但它似乎没有调整我的照片大小。我是 JavaScript 新手，请指导我。下面是我的代码:-

    <form id="imgLocal" name="imgLocal" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="file" name="receipt" id="receipt" accept="images/*" onchange="handleFiles();" />
    </form>

    // Form validation above

    submitHandler:function(form) {
    var formData = new FormData(form);
                $.ajax({
                type: 'POST',
                url: 'a/imgUpload',
                dataType: 'json',
                data: formData,
                cache: false,
                contentType: false,
                processData: false
                }).success(function(data){
                    show('loading', false);
                    alert('success');
                }else {
                   alert('error');
}

        function handleFiles()
        {
            var filesToUpload = document.getElementById('receipt').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");
                  $('#receipt').attr('value', dataurl); 
            }
            reader.readAsDataURL(file);

        }
    }

Answer 1

您无法使用新数据设置文件输入，出于安全原因，用户必须选择一个文件。

为了上传生成的图像，您可以上传数据 URL 并将 Base64 字符串解码回二进制格式并将其保存在服务器端。或者，您可以从 Canvas 中获取图像作为 blob，然后将其附加到您的 FormData 对象。

您可以调用toBlob，而不是调用toDataURL获取一个 blob 对象。

canvas.toBlob(function(imgBlob){
   formData.append("receipt",imgBlob,"filenameForImage.png");
},'image/png');

请注意，toBlob 方法尚未完全支持，但 MDN 引用确实提供了可以使用的 polyfill:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, toBlob, {
  value: function (callback, type, quality) {

    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
        len = binStr.length,
        arr = new Uint8Array(len);

    for (var i=0; i<len; i++ ) {
     arr[i] = binStr.charCodeAt(i);
    }

    callback( new Blob( [arr], {type: type || 'image/png'} ) );
  }
 });
}