Я создаю сайт, на котором будет много загруженных пользователем изображений. Я хотел бы изменить размер и сжать (предпочтительно изменить их формат на.jpg) эти образы на стороне клиента, прежде чем загружать их на сервер.
Как бы это сделать? Я нашел несколько решений, но никто не работает над загруженными файлами. Последнее, что я пробовал, это скрипт Hermite-resize. Должно быть так просто:
// Get images from input field
var uploadedImages = event.currentTarget.files;
var HERMITE = new Hermite_class();
HERMITE.resize_image(uploadedImages[1], 300, 100);
Но, по-видимому, uploadedImages
возвращаются как null
. Хотя я также использую их в другом месте, поэтому я на 100% уверен, что они не являются null
Кто-нибудь знает, как эффективно использовать этот скрипт с загруженными файлами? Или, может быть, лучшее решение для изменения размера/сжатия изображений на стороне клиента?
Заранее спасибо!
Я нашел (вроде) решение моей проблемы. Это не будет хорошо для всех, но этот парень написал небольшой сценарий, который идеально подходит для того, что я пытаюсь выполнить:
qaru.site/questions/104910/...
Работает прямо из коробки! Единственное, что я добавил, это вернуть возвращенному блоку метку времени и ее оригинальное имя, прежде чем нажимать на массив:
var images = event.currentTarget.files
resizeImage({
file: images[i],
maxSize: 500
}).then(function(resizedImage) {
resizedImage.lastModifiedDate = new Date()
resizedImage.name = images[i].name
uploadedImages.push(resizedImage)
}).catch(function(error) {
console.log(error)
})
Я пытался работать на гермите, но это не хороший класс, потому что он постоянно дает мне ошибку, поэтому вы можете использовать ниже код, на скрипке, а также класс отшельника хочет img element id
HTML
<input type="file" id="fileOpload"><br>
<img src="" alt="Image preview..." id="image">
<canvas id="canvas" height=500 width=500></canvas>
Javascript
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
var percentage = 0.75;
reader.addEventListener("load", function () {
preview.src = reader.result;
preview.onload = function () {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.height = canvas.width * (preview.height / preview.width);
var oc = document.createElement('canvas'),octx = oc.getContext('2d');
oc.width = preview.width * percentage;
oc.height = preview.height * percentage;
canvas.width = oc.width;
canvas.height = oc.height;
octx.drawImage(preview, 0, 0, oc.width, oc.height);
octx.drawImage(oc, 0, 0, oc.width, oc.height);
ctx.drawImage(oc, 0, 0, oc.width, oc.height,0, 0, canvas.width, canvas.height);
}
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
document.getElementById('fileOpload').addEventListener('change', previewFile);