html5 在线编辑图片大小,上传前使用HTML5调整图片大小

慕尼黑8549860

这就是我最终要做的，并且效果很好。首先，我将文件输入移到了表单之外，以便不提交：

        ... a few more inputs ... 然后，我将uploadPhotos功能更改为仅处理调整大小：window.uploadPhotos = function(url){    // Read in file    var file = event.target.files[0];    // Ensure it's an image    if(file.type.match(/image.*/)) {        console.log('An image has been loaded');        // Load the image        var reader = new FileReader();        reader.onload = function (readerEvent) {            var image = new Image();            image.onload = function (imageEvent) {                // Resize the image                var canvas = document.createElement('canvas'),                    max_size = 544,// TODO : pull max size from a site config                    width = image.width,                    height = image.height;                if (width > height) {                    if (width > max_size) {                        height *= max_size / width;                        width = max_size;                    }                } else {                    if (height > max_size) {                        width *= max_size / height;                        height = max_size;                    }                }                canvas.width = width;                canvas.height = height;                canvas.getContext('2d').drawImage(image, 0, 0, width, height);                var dataUrl = canvas.toDataURL('image/jpeg');                var resizedImage = dataURLToBlob(dataUrl);                $.event.trigger({                    type: "imageResized",                    blob: resizedImage,                    url: dataUrl                });            }            image.src = readerEvent.target.result;        }        reader.readAsDataURL(file);    }};如您所见，我正在使用canvas.toDataURL('image/jpeg');将已调整大小的图像更改为dataUrl adn，然后调用该函数dataURLToBlob(dataUrl);将dataUrl转换为Blob，然后可以将其附加到表单。创建Blob后，我会触发一个自定义事件。这是创建Blob的函数：/* Utility function to convert a canvas to a BLOB */var dataURLToBlob = function(dataURL) {    var BASE64_MARKER = ';base64,';    if (dataURL.indexOf(BASE64_MARKER) == -1) {        var parts = dataURL.split(',');        var contentType = parts[0].split(':')[1];        var raw = parts[1];        return new Blob([raw], {type: contentType});    }    var parts = dataURL.split(BASE64_MARKER);    var contentType = parts[0].split(':')[1];    var raw = window.atob(parts[1]);    var rawLength = raw.length;    var uInt8Array = new Uint8Array(rawLength);    for (var i = 0; i < rawLength; ++i) {        uInt8Array[i] = raw.charCodeAt(i);    }    return new Blob([uInt8Array], {type: contentType});}/* End Utility function to convert a canvas to a BLOB      */最后，这是我的事件处理程序，该事件处理程序从自定义事件中获取Blob，然后追加表单然后提交。/* Handle image resized events */$(document).on("imageResized", function (event) {    var data = new FormData($("form[id*='uploadImageForm']")[0]);    if (event.blob && event.url) {        data.append('image_data', event.blob);        $.ajax({            url: event.url,            data: data,            cache: false,            contentType: false,            processData: false,            type: 'POST',            success: function(data){               //handle errors...            }        });    }});