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

@masterbloger · Регистрация: 24.11.2010

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

Здравствуйте

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

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

Заранее спасибо за помощь
Виталий

@Воваша · 16.05.2012, 19:13

masterbloger, типа фотошоп онлайн?

Т.е. вам нужен скриншот страницы, если кнопочка Print Screen не подходит.
Поищите по данному запросу в поисковиках. Где-то видел вариант через сайт, где делаются скриншоты, сделать скриншот

@Nurik · 17.05.2012, 01:04

Хмм...
Если подумать.. То думаю можно через PHP наверное.
А именно через библиотеку GD. Она позволяет работать с графикой

@masterbloger · 17.05.2012, 11:54 **[ТС]**

Сообщение от Nurik

То думаю можно через PHP наверное

Это конечно да. Я даже начал сразу действовать в данном направлении, но столкнулся со множеством задач и непростых вычислений. Например текст в блоке div может находится в любом месте на фоновом изображении и при этом фон его div'a может быть полупрозрачным.
В общем если долго копаться то можно сделать то что мне нужно через ПХП, но просто я получаю отличный результат с помощью html +сss и думаю есть способ сделать что-то типа скриншота определённой области страницы или преобразовать div'ы, скажем, в canvas или svg, а уже из него получить изображение.

Добавлено через 2 часа 0 минут
Вот например сервис который умеет всё то что мне нужно - http://1001mem.ru/create_comics
Никто не знает, случайно, как он работает?

@masterbloger · 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, то вообще классно будет

@Дзо · 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);

@masterbloger · 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;

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов 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. Задача: реализовать контроль корректности заполнения дат назначения. . .

@masterbloger 1 / 1 / 0 Регистрация: 24.11.2010 Сообщений: 20

	Создать изображение из div 16.05.2012, 18:01. Показов 11141. Ответов 6 Метки нет (Все метки) Здравствуйте Натолкните пожалуйста на мысль как можно реализовать такую вещь: Есть несколько элементов div на html странице. Некоторые содержат текст, некоторые картинку в качестве фона. Они накладываются один на другой и в итоге формируют некое изображение. С помощью jquery дана возможность изменять размеры и положение этих элементов. Теперь вопрос: Как можно преобразовать эти элементы div в одно изображение, чтобы пользователь мог сохранить его себе на компьютер или отправить кому-то? Мне не нужно сохранять это изображение на сервере а просто выдать в браузер. Заранее спасибо за помощь Виталий 0

@Воваша 26 / 26 / 2 Регистрация: 10.05.2012 Сообщений: 120
	16.05.2012, 19:13
	masterbloger, типа фотошоп онлайн? Т.е. вам нужен скриншот страницы, если кнопочка Print Screen не подходит. Поищите по данному запросу в поисковиках. Где-то видел вариант через сайт, где делаются скриншоты, сделать скриншот 0

@Nurik 3 / 3 / 3 Регистрация: 17.04.2012 Сообщений: 25
	17.05.2012, 01:04
	Хмм... Если подумать.. То думаю можно через PHP наверное. А именно через библиотеку GD. Она позволяет работать с графикой 0

@masterbloger 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