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

Jcrop - обрезка до загрузки, неправильные координаты

17.11.2015, 09:49. Показов 2702. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Для кадрирования (обрезки) фотографии до загрузки выводится превью и его кадрируем.
Проблема в том, что если превью 1:1 то всё нормально, а если фотография большая и ужимается или намеренно задать ширину, для удобства, например 450px то координаты пересчитываются по заданному размеру, а не по реальному. Необходимо например: реальный размер фотографии 900х600px размер превью уменьшаем до 450х300px, смещение выделенной области в 10px покажет как 10px, а надо что бы показывало 20px и остальные координаты также пересчитывались относительно реального размера.
jQuery не знаю совсем и хочется получить готовое решение.
Вот код который использую:
Code
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
103
104
105
// convert bytes into friendly format
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];
};
 
// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('.error').html('Пожалуйста, выберите поле кадрирования').show();
    return false;
};
 
// update info by cropping (onChange and onSelect events handler)
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);
};
 
// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('.info #w').val('');
    $('.info #h').val('');
};
 
function fileSelectHandler() {
 
    // get selected file
    var oFile = $('#image_file')[0].files[0];
 
    // hide all errors
    $('.error').hide();
 
    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (! rFilter.test(oFile.type)) {
        $('.error').html('Выберите формат изображения jpg или png').show();
        return;
    }
 
    // check for file size
    if (oFile.size > 250 * 1024) {
        $('.error').html('Вы выбрали слишком большой файл, пожалуйста, выберите файл меньшего размера').show();
        return;
    }
 
    // preview element
    var oImage = document.getElementById('preview');
 
    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e) {
 
        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler
 
            // display step 2
            $('.step2').fadeIn(500);
 
            // display some basic image info
            var sResultFileSize = bytesToSize(oFile.size);
            $('#filesize').val(sResultFileSize);
            $('#filetype').val(oFile.type);
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
 
            // Create variables (in this scope) to hold the Jcrop API and image size
            var jcrop_api, boundx, boundy;
 
            // destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined') 
                jcrop_api.destroy();
 
            // initialize Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], // min crop size
                aspectRatio : 4/3, // keep aspect ratio 1:1
                setSelect: [ 0, 0, 222, 167 ],
                bgFade: true, // use fade effect
                bgOpacity: .5, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, function(){
 
                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
 
                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });
        };
    };
 
    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
17.11.2015, 09:49
Ответы с готовыми решениями:

Неправильные координаты формы
Добрый день, у меня есть проект, форма 371x139 (Form2). Мне нужно при запуске программы показывать эту форму в указанных экранных...

Неправильные координаты при экспорте
Доброго дня форумчане. Такая беда. В 3дс максе делал для объекта текстуры. Вроде сделал, всё отлично. Делаю Экспорт модели 1 в FBX , 2...

Обрезка картинки до загрузки на сервер
Добрый день. Подскажите, пожалуйста, по такой теме... Нужно добавлять фото к пользователям, они должны быть квадратные, но не...

5
1 / 1 / 0
Регистрация: 16.11.2015
Сообщений: 7
12.12.2015, 15:41  [ТС]
Проблему можно решить следующим образом.
Задаём фиксированный размер превью
Code
1
<img id="preview" style="width:450px;" />
и получаем коэффициент погрешности (ср)
Code
1
$('#cp').val(oImage.naturalWidth / 450);
.
В функции updateInfo координаты умножаем на полученный коэффициент погрешности.

Code
1
2
3
4
5
6
7
8
9
function updateInfo(e) {
    var rw = $('#cp');
    $('#x1').val(e.x*cp);
    $('#y1').val(e.y*cp);
    $('#x2').val(e.x2*cp);
    $('#y2').val(e.y2*cp);
    $('#w').val(e.w*cp);
    $('#h').val(e.h*cp);
};
К сожалению выдаёт - NaN, где то, что то неправильно в коде подскажите пожалуйста где ошибка.
1
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 2
14.12.2015, 06:27
исправил ошибку

PHP
1
2
3
4
5
6
7
8
9
function updateInfo(e) {
    var rw = $('#cp').val();
    $('#x1').val(e.x*rw);
    $('#y1').val(e.y*rw);
    $('#x2').val(e.x2*rw);
    $('#y2').val(e.y2*rw);
    $('#w').val(e.w*rw);
    $('#h').val(e.h*rw);
};
0
1 / 1 / 0
Регистрация: 16.11.2015
Сообщений: 7
14.12.2015, 08:03  [ТС]
Роберт27 спасибо.
Теперь работает.
0
0 / 0 / 0
Регистрация: 14.12.2015
Сообщений: 2
14.12.2015, 10:22
и тебе спасибо за идею!
0
1 / 1 / 0
Регистрация: 16.11.2015
Сообщений: 7
18.04.2016, 12:12  [ТС]
Я изменил немного код для удобства, и вот что получилось:
Было - $('#rw').val(oImage.naturalWidth / 220);
Стало - $('#rw').val($(this)[0].getBoundingClientRect().width);
Теперь не нужно задавать фиксированный размер картинке, вычисляется ширина блока.
В стилях картинке задаём width:100%; блоку width:auto;

Вопрос: как передать в setSelect: [ 0, 0, x3, y3 ] координаты так, что бы и область обрезки автоматом принимала нужные размеры?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
18.04.2016, 12:12
Помогаю со студенческими работами здесь

Неправильные координаты отображения выпадающего списка
Здравствуйте, уважаемые специалисты. Столкнулся с задачкой и не могу ее решить, возможно у вас будут какие-то идеи... Суть: Есть меню с...

Файл хранилища данных конфигурации загрузки windows содержит неправильные данные
Здравствуйте, помогите пожалуйста с проблемой Не загружается виндовс, при загрузке застывает экран с текстом: файл хранилища...

координаты загрузки формы
Добрый день. Мне надо загрузить форму в определенном месте. Как программным путем задать координаты загрузки формы?

Jcrop: Изменение формы обрезки фотографии
подскажите пожалуйста, как можно изменить пропорции обрезки изображения вот в этом плагине? здесь квадратная обрезка, а надо например...

После загрузки приложения картинки должны менять свои координаты случайным образом
Расположите на форме таймер и несколько изображений (массив изображений) Разработайте программный код для того чтобы приложение работало...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
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