html语言修改图片大小,上传前使用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并调用函数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...

}

});

}

});

2020-05-01