html5要如何导入图片大小,javascript – 使用HTML5在上传之前调整图片大小

这是我最后做的，它的工作非常好。

首先，我移动了表单外部的文件输入，以便它不提交：

... 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);将数据转换为一个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...

}

});

}

});