Тугай
Новичок
на форме выбираем .jpg файл, делаем resize на javascript через canvas, дальше из уменьшеного еще и thumbnail формируем
код такой:
Если не писать setTimeout(function () { ...
для формирования thumb то он получается черный, как будто img_preview.src = dataUrl; не отрабатывает.
Может кто в курсе как такое правильно делается ?
код такой:
Код:
imgInput.addEventListener('change', function changeImg(e) {
if (e.target.files) {
let imageFile = e.target.files[0];
var reader = new FileReader();
img_preview.src = "";
document.getElementById("img_name").value = e.target.files[0].name;
reader.onload = function (e) {
var img = document.createElement("img");
img.onload = function (event) {
const MAX_WIDTH = 1024;
const MAX_HEIGHT = 768;
const THUMB_WIDTH = 128;
const THUMB_HEIGHT = 96;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height = height * (MAX_WIDTH / width);
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width = width * (MAX_HEIGHT / height);
height = MAX_HEIGHT;
}
}
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
const dataUrl = canvas.toDataURL(imageFile.type, 0.8);
img_preview.src = dataUrl;
img_file_data.value = dataUrl.slice(23,);
// thumb
if (width > height) {
if (width > THUMB_WIDTH) {
height = height * (THUMB_WIDTH / width);
width = THUMB_WIDTH;
}
} else {
if (height > THUMB_HEIGHT) {
width = width * (THUMB_HEIGHT / height);
height = THUMB_HEIGHT;
}
}
setTimeout(function () {
canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
ctx.drawImage(img_preview, 0, 0, width, height);
const dataThumbUrl = canvas.toDataURL(imageFile.type, 0.8);
document.getElementById("img_thumb").src = dataThumbUrl;
img_thumb_file_data.value = dataThumbUrl.slice(23,);
}, 500);
}
img.src = e.target.result;
}
reader.readAsDataURL(imageFile);
}
});
для формирования thumb то он получается черный, как будто img_preview.src = dataUrl; не отрабатывает.
Может кто в курсе как такое правильно делается ?