Редактирование изображения

@pixel · Регистрация: 19.05.2009

Студворк — интернет-сервис помощи студентам

Добрый день.
Наверное я спрошу глупость, но , можно ли редактировать изображение на стороне клиента? Т.е. открывает страницу сайта для того что бы получить аватарку, но файл для редактирования что бы не грузить на сервер а подгружать в браузер клиента - можно так?

@Daredevi1 · 30.03.2012, 16:58

Если картинки находятся на твоем домене, то можно с помощью canvas.

@GC92 · 30.03.2012, 18:32

соглашусь

@pixel · 31.03.2012, 15:20 **[ТС]**

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

@pixel · 05.04.2012, 14:37 **[ТС]**

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

@GC92 · 05.04.2012, 14:57

HTML5
1
2
3
4
<!DOCTYPE HTML>
<head>
<title>File API</title>
<style>

CSS
1
2
3
4
5
.imgDiv {
    overflow: auto;
    width: 256px;
    height: 256px;
}

HTML5
1
2
3
4
5
6
7
</style>
</head>
<body>
    <input type="file" id="files" name="files[]" multiple/>
    <output id="list"></output>
    
    <script>

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
        function handleFileSelect(evt) {
            var files = evt.target.files;
        
            for (var i = 0, f; f = files[i]; i++) {
        
                if (!f.type.match('image.*')) {
                    continue;
                }
        
                var reader = new FileReader();
        
                reader.onload = (function(theFile) {
                    return function(e) {
                        var span = document.createElement('span');
                        span.innerHTML = ['<div class="imgDiv"><img class="thumb" src="', e.target.result, '" title="', theFile.name, '"/></div>'].join('');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f);
        
                reader.readAsDataURL(f);
            }
        }
        
        document.getElementById('files').addEventListener('change', handleFileSelect, false);

HTML5
1
2
3
    </script>
</body>
</html>

@pixel · 05.04.2012, 15:29 **[ТС]**

да, это то что надо. а можно как то сделать, что бы перемещаться по изображению не бегунками а нажать мышью и тащить?

@GC92 · 05.04.2012, 16:17

HTML5
1
2
3
4
5
6
<!DOCTYPE HTML>
<head>
<title>File API</title>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui-1.8.18.draggable.min.js"></script>
<style>

CSS
1
2
3
4
5
.imgDiv {
    overflow: auto;
    width: 256px;
    height: 256px;
}

HTML5
1
2
3
4
5
6
</style>
</head>
<body>
    <input type="file" id="files" name="files[]" multiple/>
    <output id="list"></output>
    <script>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        function handleFileSelect(evt) {
            var files = evt.target.files;
            for (var i = 0, f; f = files[i]; i++) {
                if (!f.type.match('image.*')) { continue; }
                var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                        var span = document.createElement('span');
                        span.innerHTML = ['<div class="imgDiv"><img class="thumb" src="', e.target.result, '" title="', theFile.name, '"/></div>'].join('');
                        document.getElementById('list').insertBefore(span, null);
                        $('.thumb').draggable({cursor: 'move'});
                    };
                })(f);
                reader.readAsDataURL(f);
            }
        }
        document.getElementById('files').addEventListener('change', handleFileSelect, false);

HTML5
1
2
3
    </script>
</body>
</html>

@pixel · 05.04.2012, 16:43 **[ТС]**

что то не работает

@GC92 · 05.04.2012, 16:53

свой путь к скриптам прописал?

@pixel · 05.04.2012, 17:07 **[ТС]**

да, сейчас попробую другой скрипт качнуть

Новые блоги и статьи Все статьи Все блоги /
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290

	Редактирование изображения 30.03.2012, 15:07. Показов 4753. Ответов 10 Метки нет (Все метки) Добрый день. Наверное я спрошу глупость, но , можно ли редактировать изображение на стороне клиента? Т.е. открывает страницу сайта для того что бы получить аватарку, но файл для редактирования что бы не грузить на сервер а подгружать в браузер клиента - можно так? 0

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	30.03.2012, 16:58
	Если картинки находятся на твоем домене, то можно с помощью canvas. 0

@GC92 1 / 1 / 2 Регистрация: 14.06.2010 Сообщений: 9
	30.03.2012, 18:32
	соглашусь 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	31.03.2012, 15:20 [ТС]
	я немного не то имел в виду. например, юзер хочет сделать аватарку. по логике грузит оригинал на сервер где и происходит вырезка области фотки и разные манипуляции. так вот, если он проводит эти манипуляции на своем компе, может и вырезать область фотки можно у себя на компе, что бы не посылать оригиналы на сервер? 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	05.04.2012, 14:37 [ТС]
	Подскажите, как можно подгрузить картинку, что бы втиснуть ее в div, не ужимая по размерам div, но и что бы за пределы div не выходила. Т.е. что бы появились бегунки для прокрутки. 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	05.04.2012, 15:29 [ТС]
	да, это то что надо. а можно как то сделать, что бы перемещаться по изображению не бегунками а нажать мышью и тащить? 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	05.04.2012, 16:43 [ТС]
	что то не работает 0

@GC92 1 / 1 / 2 Регистрация: 14.06.2010 Сообщений: 9
	05.04.2012, 16:53
	свой путь к скриптам прописал? 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	05.04.2012, 17:07 [ТС]
	да, сейчас попробую другой скрипт качнуть 0