Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/55: Рейтинг темы: голосов - 55, средняя оценка - 4.75
1 / 1 / 0
Регистрация: 24.11.2010
Сообщений: 20

Создать изображение из div

16.05.2012, 18:01. Показов 11141. Ответов 6
Метки нет (Все метки)

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

Натолкните пожалуйста на мысль как можно реализовать такую вещь:
Есть несколько элементов div на html странице. Некоторые содержат текст, некоторые картинку в качестве фона. Они накладываются один на другой и в итоге формируют некое изображение.
С помощью jquery дана возможность изменять размеры и положение этих элементов.

Теперь вопрос: Как можно преобразовать эти элементы div в одно изображение, чтобы пользователь мог сохранить его себе на компьютер или отправить кому-то?
Мне не нужно сохранять это изображение на сервере а просто выдать в браузер.

Заранее спасибо за помощь
Виталий
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
16.05.2012, 18:01
Ответы с готовыми решениями:

div и изображение
Добрый вечер как посредством JavaScript вставить изображение в нужный div?

менять фоновое изображение у <div> при клике
Доброго времени! возникла необходимость с помощью кнопок &lt;&lt;Предыдущий и Следующий&gt;&gt; менять фоновое изображение у...

При нажатии на ссылку в div добавляется изображение
В смысле есть div c атрибутом contenteditable=&quot;true&quot;, и при нажатии на ссылку в него добавляется изображение. Вот есть набросок, но тут...

6
26 / 26 / 2
Регистрация: 10.05.2012
Сообщений: 120
16.05.2012, 19:13
masterbloger, типа фотошоп онлайн?
Т.е. вам нужен скриншот страницы, если кнопочка Print Screen не подходит.
Поищите по данному запросу в поисковиках. Где-то видел вариант через сайт, где делаются скриншоты, сделать скриншот
0
3 / 3 / 3
Регистрация: 17.04.2012
Сообщений: 25
17.05.2012, 01:04
Хмм...
Если подумать.. То думаю можно через PHP наверное.
А именно через библиотеку GD. Она позволяет работать с графикой
0
1 / 1 / 0
Регистрация: 24.11.2010
Сообщений: 20
17.05.2012, 11:54  [ТС]
Цитата Сообщение от Nurik Посмотреть сообщение
То думаю можно через PHP наверное
Это конечно да. Я даже начал сразу действовать в данном направлении, но столкнулся со множеством задач и непростых вычислений. Например текст в блоке div может находится в любом месте на фоновом изображении и при этом фон его div'a может быть полупрозрачным.
В общем если долго копаться то можно сделать то что мне нужно через ПХП, но просто я получаю отличный результат с помощью html +сss и думаю есть способ сделать что-то типа скриншота определённой области страницы или преобразовать div'ы, скажем, в canvas или svg, а уже из него получить изображение.

Добавлено через 2 часа 0 минут
Вот например сервис который умеет всё то что мне нужно - http://1001mem.ru/create_comics
Никто не знает, случайно, как он работает?
0
1 / 1 / 0
Регистрация: 24.11.2010
Сообщений: 20
18.05.2012, 17:16  [ТС]
Нашёл подходящий вариант решения этой задачи:
Вот по этой ссылке есть информация как элемент img на canvas нанести - http://stackoverflow.com/quest... ng-with-th
А здесь - информация о том, как canvas в изображение превратить - http://motyar.blogspot.com/201... image.html
То есть в div'ы вставляем картинки, накладываем друг на друга как нам нужно, переносим всё на canvas и сохраняем как изображение.
Всё просто, спасибо всем!!!

Добавлено через 1 час 51 минуту
Вот ещё вопрос появился: Как мне нанести на canvas текст в прямоугольнике с полупрозрачным фоном.
У меня есть div, который содержит этот текст и его фон как раз полупрозрачный. Если есть возможность нарисовать на canvas элемент div, то вообще классно будет
0
2 / 2 / 2
Регистрация: 15.01.2012
Сообщений: 5
18.05.2012, 19:13
Для серьёзной работы с canvas рекомендую подобрать какую-нить библиотеку, ибо всё писать ручками муторно, да и для зачем, если уже кто-то реализовал.

А вообще, для того чтобы нанести полупрозрачный фон можно сделать так:

JavaScript
1
2
3
4
5
6
7
var context = document.getElementById("canvas").getContext("2d");
// Задаём чёрный полупрозрачный
context.fillStyle = "rgba(0, 0, 0, 0.5)";
// Рисуем квадратик
context.fillRect(0, 0, 100, 100);
// Пишем текст
context.fillText("Text", 10, 10);
1
1 / 1 / 0
Регистрация: 24.11.2010
Сообщений: 20
22.05.2012, 18:07  [ТС]
Вот, теперь бы ещё текст запихнуть в этот прямоугольник и ограничить его по ширине и высоте этим прямоугольником, было бы вообще классно)))

Добавлено через 1 час 6 минут
Цитата Сообщение от Дзо Посмотреть сообщение
// Задаём чёрный полупрозрачный context.fillStyle = "rgba(0, 0, 0, 0.5)";
Вопрос: А если у меня цвет в формате #ffffff, то как мне задать полупрозрачность для него?

Добавлено через 15 минут
Цитата Сообщение от masterbloger Посмотреть сообщение
Вопрос: А если у меня цвет в формате #ffffff, то как мне задать полупрозрачность для него?
Этот вопрос уже решён:
JavaScript
1
2
3
4
var back_color = $('#id_of_your_element').css('backgroundColor').split("(");
var back_color_val = back_color[1].replace(")", ", 0.5)");
var back_color_first = back_color[0].replace("rgb", "rgba");
back_color = back_color_first + "(" + back_color_val;
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
22.05.2012, 18:07
Помогаю со студенческими работами здесь

Вставить изображение в div
Можно ли как-то вставить изображение в DIV блок, не вытягивая его и не растягивая. Допустим есть блок 200х150 изображение 300х200. Вставить...

Изображение шире чем div
Здравствуйте, у меня есть блок шириной 1000px в нем есть полоска шириной в 1px и она повторяется с помощью css repeat-x, как мне сделать...

Как поместить изображение в div
Добрый день! Как можно поместить изображение в div, чтобы оно не вылазило за его пределы? Чтобы получилось нечто вроде этого ...

Фон изображение для отдельного div
Может кто сталкивался или может помочь Как сделать для каждого div отдельный фон. Имеется блок 900х400, хочу сделать для него...

Не отображается изображение в теге div в IE/Firefox
Доброго времени суток! Есть html-документ со следующим содержимым: &lt;div class=&quot;special questions&quot;&gt; &lt;div...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code
Loafer 13.04.2026
{ "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru