Моя задача:
Шаг 1a: Пользователь загружает изображение
Вход: Исходный размер изображения (фиксированная ширина переменной высоты) - он может быть любого размера.
Ограничение:
A. ТИП: JPG/BMP/PNG и т.д.
B. МАКС. ИЗМЕРЕНИЕ
-example 1024X1024px.
Шаг 1b: После загрузки система проверяет критерии, соответствующие нашим критериям.
Критерии: ПРОВЕРЬТЕ МАКСИМАЛЬНЫЕ РАЗМЕРЫ
Если да:
Если критерии соответствия запрашивают у пользователя создание уменьшенного изображения размера (145 x 190)
Если нет:
Снова попросите пользователя изменить размер изображения до тех пор, пока оно не соответствует нашим критериям
Конечный выход:
2) 145 x 190 (Результат поиска изображение) (thumbnail)
3) 30% thumbnail
4) Для профиля pic мы определим фиксированную ширину, в зависимости от того, какая высота будет изменяться (ширина пока не определена)
Это моя задача. В этой задаче я могу добиться загрузки изображений, проверить размер. Но не шаг за шагом. пожалуйста, помогите мне выполнить эту задачу. Я новичок в JQuery, у меня есть только 1 месяц опыта, и эта задача для меня очень сложна. Надеюсь, вы поймете мой вопрос.
Мое обучение (для проверки размера): html:
<input type="file" id="file" />
JQuery:
var _URL = window.URL || window.webkitURL;
$("#file").change(function(e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function() {
alert(this.width + " " + this.height);
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
}
});
Мое обучение (для загрузки изображения): Html:
JQuery:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(thumbWidth)
.height(thumbHeight);
};
reader.readAsDataURL(input.files[0]);
}
}
Это решение (не совсем, но надеюсь, что это поможет вам где-то)
HTML:
<p>image is set to 100x100 pixels!</p>
<img id="draggable" src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" />
<div id="dim"></div>
JQuery:
var img = document.getElementById('draggable'),
new_img = new Image();
new_img.onload = function() {
var img_width = this.width,
img_heigth = this.height;
document.getElementById('dim').innerHTML = 'Original dimensions are : ' + img_width + 'x' + img_heigth + ' pixels';
}
new_img.src = img.src;
CSS:
#draggable {height: 100px; width: 100px;}