Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.54/13: Рейтинг темы: голосов - 13, средняя оценка - 4.54
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70

Jquery изменить размер изображения

31.07.2015, 18:27. Показов 2874. Ответов 22
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте товарищи, я пытаюсь уменьшить размер картинки, но у меня не получается.
Когда я загружаю картинку, Jquery показывает мне картинку почти на весь экран.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};
 
// выбрать полигон обрезки
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('.error').html('Please select a crop region and then press Upload').show();
    return false;
};
 
// обновление
function updateInfo(e) {
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#w').val(e.w);
    $('#h').val(e.h);
};
 
// очистка инфы об обрезке
function clearInfo() {
    $('.info #w').val('');
    $('.info #h').val('');
};
 
function fileSelectHandler() {
 
    // добавить выбранный файл
    var oFile = $('#image_file')[0].files[0];
 
    // ошибочка
    $('.error').hide();
 
    // проверка расширения файла
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (! rFilter.test(oFile.type)) {
        $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
        return;
    }
 
    // проверка веса файла
    if (oFile.size > 250 * 1024) {
        $('.error').html('You have selected too big file, please select a one smaller image file').show();
        return;
    }
 
    // просмотр
    var oImage = document.getElementById('preview');
 
    // HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e) {
        location.href = '#openModal';
        // e.target.result contains the DataURL
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler
 
            // показать
            $('.step2').fadeIn(500);
 
            // показать инфу
            var sResultFileSize = bytesToSize(oFile.size);
            $('#filesize').val(sResultFileSize);
            $('#filetype').val(oFile.type);
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
 
            // переменные для размера изображения
            var jcrop_api, boundx, boundy;
 
            if (typeof jcrop_api != 'undefined')
                jcrop_api.destroy();
 
            // инициировать Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], // min crop size
                aspectRatio : 1, // keep aspect ratio 1:1
                bgFade: true, // use fade effect
                bgOpacity: .3, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, function(){
 
                // спросить у API реальный размер изображения
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
 
                // подружить Jcrop API с переменными jcrop_api
                jcrop_api = this;
            });
        };
    };
 
    // чтение выбранного файла как DataURL
    oReader.readAsDataURL(oFile);
}
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
31.07.2015, 18:27
Ответы с готовыми решениями:

JQUERY, размер страницы!
как сэкономить на размере страницы, ведь когда мы подключаем jquery, мы плюсуем к размеру загружемой страницы еще как минимум 50кб, как...

изображения и jquery
<div id="photo"> <p id="bigpic"></p> <ul id="preview"> <?php $directory = '../picture/min/'; $allowed_types = array...

позиция изображения jquery
Помогите разобраться, есть изображения к которым применен скрипт на увеличение при наведении, но дело в том что при наведении на одно те...

22
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:02
dmitry_yakovenk, а что средствами css не уменьшаете? я понимаю что на backendе есть смысл уменьшать, что бы страница быстрей прогружалась, а тут она все ровно грузит ее целеком
0
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70
31.07.2015, 20:13  [ТС]
через CSS пытался я. Все равно картину показывает почти на полный экран.
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:14
dmitry_yakovenk, как вы пытались?
0
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70
31.07.2015, 20:22  [ТС]
Написал в CSS вот такой код:
CSS
1
2
3
4
5
6
7
8
9
10
.images {
    position    : relative;
    height      : 130px;
    width       : 200px;
    border      : solid 1px #ccc;
}
.images img {
    position    : absolute;
    clip        : rect(30px 165px 100px 30px);
}
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:24
dmitry_yakovenk, класс image вы к самому тегу img привязали?
0
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70
31.07.2015, 20:28  [ТС]
ну да
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:30
dmitry_yakovenk, https://jsfiddle.net/j1s1wk9e/

Добавлено через 32 секунды
HTML5
1
<img src="http://desktopwallpapers.org.ua/large/201110/6047.jpg" alt="">
CSS
1
2
3
img{
    width:500px;
}
0
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70
31.07.2015, 20:39  [ТС]
Не получилось.
Вот скрин: http://screenshot.su/show.php?... fe6bb6.jpg
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:42
dmitry_yakovenk, и что я, по вашему, должен понять из скрина?) у вас слишком большой код для такой мелкой задачи...зачем сколько плагинов??
0
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70
31.07.2015, 20:42  [ТС]
Хотя лучше найти новый плагин
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:44
dmitry_yakovenk, повторюсь, зачем вам плагин для такой задачи???
0
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70
31.07.2015, 20:46  [ТС]
Нужен для того что бы обрезать изображение
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:47
dmitry_yakovenk, а, вы обрезать хотите... я то думал просто умееьшить
0
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70
31.07.2015, 20:49  [ТС]
Когда загружаю изображение, картинка становить почти на весь экран. И я не могу пролистать страницу вниз для того что бы нажать на кнопку готово.
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
31.07.2015, 20:50
dmitry_yakovenk, обязательно ее обрезать что бы уменьшить?? задайте ей максимальную ширину
0
 Аватар для dmitry_yakovenk
1 / 1 / 2
Регистрация: 11.01.2015
Сообщений: 70
31.07.2015, 20:53  [ТС]
Ну ладно. Может так сойдет.
0
1 / 1 / 0
Регистрация: 16.11.2015
Сообщений: 7
16.11.2015, 14:50
dmitry_yakovenk, <img id="preview" style="width:500px" />
Но это не решает проблему, точнее появляется другая, кадрирование точнее координаты будут из расчёта 500px, а не от реального размера.
необходимо изменять скрипт.
0
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
16.11.2015, 14:52
lubitel3,

Не по теме:

некрофил

0
1 / 1 / 0
Регистрация: 16.11.2015
Сообщений: 7
16.11.2015, 15:21
Давран, почему не по теме?
dmitry_yakovenk спросил - Когда загружаю изображение, картинка становить почти на весь экран. И я не могу пролистать страницу вниз для того что бы нажать на кнопку готово.
Я ему ответил и предупредил какая будет проблема.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
16.11.2015, 15:21
Помогаю со студенческими работами здесь

Jquery плавная смена изображения
Подскажите простой и лёгкий способ сделать на Jquery плавную смену одного изображения другим слева направо. Например есть код ...

Динамическое добавление изображения с использованием jQuery
Помогите студенту, плиз) Есть четыре элемента (цветных прямоугольника) со словами внутри: https://jsfiddle.net/gL9cqcxv/1/ Нужно,...

Изменить размер изображения при наведении мышки
в cms есть превью материала, кнопка подробнее и сам материал... размер изображения в превью задаётся catitemIntroText img{}, размер...

Изменить размер изображения
Здравствуйте! Помогите решить задачу, мой код проходит только половину тестов. Условия:При обработке изображений часто встречается...

Изменить размер изображения
Думаю тема избита на нет, но я не могу догнать. Один модератор подробно показал как делать в этой теме. я сделал так function...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru