如何在html中上传本地图片大小,上传前使用HTML5调整图片大小

如果有兴趣，我制作了打字稿版本：

interface IResizeImageOptions {

maxSize: number;

file: File;

}

const resizeImage = (settings: IResizeImageOptions) => {

const file = settings.file;

const maxSize = settings.maxSize;

const reader = new FileReader();

const image = new Image();

const canvas = document.createElement('canvas');

const dataURItoBlob = (dataURI: string) => {

const bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?

atob(dataURI.split(',')[1]) :

unescape(dataURI.split(',')[1]);

const mime = dataURI.split(',')[0].split(':')[1].split(';')[0];

const max = bytes.length;

const ia = new Uint8Array(max);

for (var i = 0; i < max; i++) ia[i] = bytes.charCodeAt(i);

return new Blob([ia], {type:mime});

};

const resize = () => {

let width = image.width;

let height = image.height;

if (width > height) {

if (width > maxSize) {

height *= maxSize / width;

width = maxSize;

}

} else {

if (height > maxSize) {

width *= maxSize / height;

height = maxSize;

}

}

canvas.width = width;

canvas.height = height;

canvas.getContext('2d').drawImage(image, 0, 0, width, height);

let dataUrl = canvas.toDataURL('image/jpeg');

return dataURItoBlob(dataUrl);

};

return new Promise((ok, no) => {

if (!file.type.match(/image.*/)) {

no(new Error("Not an image"));

return;

}

reader.onload = (readerEvent: any) => {

image.onload = () => ok(resize());

image.src = readerEvent.target.result;

};

reader.readAsDataURL(file);

})

};

这是javascript结果：

var resizeImage = function (settings) {

var file = settings.file;

var maxSize = settings.maxSize;

var reader = new FileReader();

var image = new Image();

var canvas = document.createElement('canvas');

var dataURItoBlob = function (dataURI) {

var bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?

atob(dataURI.split(',')[1]) :

unescape(dataURI.split(',')[1]);

var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];

var max = bytes.length;

var ia = new Uint8Array(max);

for (var i = 0; i < max; i++)

ia[i] = bytes.charCodeAt(i);

return new Blob([ia], { type: mime });

};

var resize = function () {

var width = image.width;

var height = image.height;

if (width > height) {

if (width > maxSize) {

height *= maxSize / width;

width = maxSize;

}

} else {

if (height > maxSize) {

width *= maxSize / height;

height = maxSize;

}

}

canvas.width = width;

canvas.height = height;

canvas.getContext('2d').drawImage(image, 0, 0, width, height);

var dataUrl = canvas.toDataURL('image/jpeg');

return dataURItoBlob(dataUrl);

};

return new Promise(function (ok, no) {

if (!file.type.match(/image.*/)) {

no(new Error("Not an image"));

return;

}

reader.onload = function (readerEvent) {

image.onload = function () { return ok(resize()); };

image.src = readerEvent.target.result;

};

reader.readAsDataURL(file);

});

};

用法就像：

resizeImage({

file: $image.files[0],

maxSize: 500

}).then(function (resizedImage) {

console.log("upload resized image")

}).catch(function (err) {

console.error(err);

});

或(async/ await)：

const config = {

file: $image.files[0],

maxSize: 500

};

const resizedImage = await resizeImage(config)

console.log("upload resized image")