предисловие
Как правило, для загрузки изображений нет необходимости загружать крупномасштабные изображения, поскольку загрузка крупномасштабных изображений будет потреблять много ресурсов, если это аватар пользователя или некоторые сцены, не требующие слишком высокого разрешения. долгое время, и это также увеличивается. Помимо накладных расходов на хранилище, пропускная способность загрузки также будет потребляться при отображении, что повлияет на эффективность загрузки. Требование от пользователей сжимать изображения перед их загрузкой влияет на взаимодействие с пользователем, поэтому увеличивает потребность в сжатии изображений во внешнем интерфейсе.
Схема сжатия
Основная идея внешнего сжатия изображения заключается в том, чтобы нарисовать изображение на холсте, а затем использовать метод toDataURL холста для управления качеством изображения, сжать изображение и, с другой стороны, уменьшить соотношение сторон. соотношение изображения для достижения эффекта сжатия изображения. Взгляните на пример кода:
resizeMe(img,type, max_width, max_height) {
var canvas = document.createElement('canvas');
var width = img.width;
var height = img.height;
max_width = !isNaN(max_width)?max_width:0;
max_height = !isNaN(max_height)?max_height:0;
// 在这里图片是等比例缩放的，调用方法时填入图片允许的最大宽度或者是最大的高度
//如果最大宽度为0 则按照最大高度固定，宽度自适应的方式来实现
//如果是最大高度为0，则按照最大的宽度来实现
if(max_width==0){
if (height > max_height) {
width = Math.round(width *= max_height / height);
height = max_height;
}
}
if(max_height==0){
if (width > max_width) {
height = Math.round(height *= max_width / width);
width = max_width;
}
}
canvas.width =width;
canvas.height = height;
var ctx = canvas.getContext("2d");
canvas.width =width;
canvas.height = height;
ctx.drawImage(img,0,0, width, height);
type = type === 'jpg'?"jpeg":type;
return canvas.toDataURL("image/"+type, 0.7);//这里的0.7值的是图片的质量
}
В приведенном выше коде параметры, которые мы передаем, в основном включают объект изображения, тип изображения, максимальную ширину и высоту изображения. При вызове метода заполните максимальную ширину или максимальную высоту, разрешенную для изображения, отрисуйте его в холст в равном соотношении, а затем преобразуйте его в формат base64 через toDataURL и верните его.Картинка в это время является сжатой картинкой. .
Создать объект изображения
В приведенном выше примере описывается процесс сжатия изображения.Одним из параметров является объект изображения, так откуда же берется объект изображения?
selectFileImage(el){
var reader = new FileReader();
var file = el.target.files[0]
var fileName = file.name;
var fileType = file.name.split(".")[1];
reader.readAsArrayBuffer(file);
reader.onload = (ev) => {
var blob = new Blob([ev.target['result']]);
window['URL'] = window['URL'] || window['webkitURL'];
var blobURL = window['URL'].createObjectURL(blob);
var image = new Image();
image.src = blobURL;
image.onload = (e) => {
var thumb = this.resizeMe(image,fileType, 400, 0);//获得的路径是将图片转换成了base64
axios.post("http://127.0.0.1:3003/useasync/upload",{file:thumb,fileName:fileName}).then(res => {
if (res.data.code == 200) {
console.log(res)
} else {
console.log(res)
}
});
}
}
}
Здесь я использую объект FileReader, который позволяет веб-приложениям асинхронно считывать содержимое файла (или буфера необработанных данных), хранящегося на компьютере пользователя, используя объект File или Blob для указания файла или данных для чтения.
Когда событие onChange ввода запускается, файл файла во входе может быть прочитан, поэтому файл считывается в кеш.По завершении чтения объект данных ArrayBuffer прочитанного файла будет сохранен в свойстве результата . Здесь мы можем видеть, что ev после чтения завершеноМы видим, что load и total представляют собой общий размер файла. Важным моментом является target и currentTarget. Эти два свойства на самом деле одинаковы. Они содержат прочитанный объект fileReader, а результат внутри — это кеш. Данные, мы передаем новый объект Blob, преобразуем его в объект Blob, а затем используем метод url для преобразования его в форму ссылки, которую можно поместить в img src. На этом этапе объект изображения создается, и его src присваивается значение.Когда изображение загружается, вызывается метод сжатия.Входящий объект изображения - это объект изображения, который мы только что создали.
Когда данные, возвращаемые после сжатия, представляют собой данные base64, мы можем загрузить их асинхронно через ajax.Здесь я использую axios для асинхронной загрузки, передавая содержимое и имя файла в качестве параметров в фоновом режиме.
фоновый прием
Пример, который я только что использовал здесь, - это создание фона для получения изображений nodejs, здесь нам нужен модуль bodyParser.
app.use(bodyParser.json({ limit:'5mb'}));//限制允许提交的大小
Размер ограничен до 5 М, то есть размер изображения, загружаемого через base64, должен быть менее 5 М. Мы можем изменить этот параметр по желанию в соответствии с потребностями бизнеса.
router.post("/upload",function(req,res){
var imgData = req.body.file;
var fileName = req.body.fileName;
var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
//var size = Buffer.byteLength(base64Data,'base64');
//var dataBuffer = Buffer.alloc(size,base64Data, 'base64');
var dataBuffer = Buffer.from(base64Data, 'base64');
fs.writeFile(process.cwd()+"/upload/"+fileName, dataBuffer, function(err) {
if(err){
res.json({success:false,errormsg:err});
}else{
res.send({success:true,msg:"保存成功！"});
}
});
})
В интерфейсе мы используем Buffer для преобразования base64 в буфер, а затем сохраняем его локально на сервере.В этом примере изображение сохраняется локально на сервере. Это делается путем сохранения изображения в кодировке base64 как изображения.
Поскольку холст используется для сжатия, а файлы получаются через объект FileReader и объект Bolb, текущая совместимость этого метода — по крайней мере IE10, пожалуйста, используйте его по мере необходимости.
постскриптум
Статья опубликована:Интерфейсное сжатие и загрузка изображений