Объединить два изображения

@dolte · Регистрация: 04.02.2013

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

Допустим есть у нас две радио кнопки, в value у них путь к картинкам.
Как эти две картинки объединить в одну и вывести в блок ?
т.е выбрали одну радио кнопку, в блок попадает это изображение, выбрали вторую радио кнопку и эти изображения соединяются в одно, не друг на друга, а именно в одно цельное изображение
Как вообще в js или jquery склеивать изображения ?

@nokados · 25.02.2014, 21:22

Вывести картинку в принципе просто.
Понадобится такой html код

HTML5
1
2
3
4
<input type='radio' name='image' value='zmeyka.bmp'/>
<input type='radio' name='image' value='getImage.jpg'/>
 
<div id='image'></div><!--Здесь будут картинки-->

А в JS пиши:

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
var images=document.getElementsByName('image');
for(i in images)
{
    i.onchange=WriteImage;/*На событие изменения состояния радиокнопки поставим обработчик. Если не сработает, попробуй заменить i.onchange на images[i].onchange - У меня просто работают оба способа*/
}
function WriteImage()
{
    if (this.checked)
    {
        var img=new Image();
        img.onload=function()
        {
        
            var divImg= document.getElementById('image');/*Сюда вставляем картинку*/
            if(divImg.getElementsByTagName('img').length<2)/*Если картинок выведено меньше двух, то добавляем новую*/
            {
                divImg.appendChild(img);
            }
            
        };
        img.className='someImage';/*добавит к картинке имя CSS класса (Не влияет на добавление, так что, если картинке класс не нужен, то можно эту строчку удалить)*/
        img.src=this.value;
    }
}

Так выведутся 2 картинки. Если нужно, чтобы они просто выглядели как одна, то это css. А если еще чтобы и скачивались сразу вместе, как единое целое, то я даже не знаю. Скорее всего это будет сложная функция, которую лучше поискать в модулях, хотя я с таким не сталкивался.

@dolte · 25.02.2014, 21:29 **[ТС]**

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

@vovandr · 25.02.2014, 21:34

а вот с яваскриптом сложнее, никакой информации по этому поводу не нашел к сожалению

Потому что js не предназначен для таких целей.

@nokados · 25.02.2014, 21:44

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

на пхп у меня такое реализовать получилось

Так вот и решение)
Можно сделать AJAX`ом

Добавлено через 4 минуты
В принципе можно генерировать изображения по их байт-коду.
И еще нашел такую статью, но я по-нерусски не ахти, так что не могу сказать решение это или нет.

@dolte · 25.02.2014, 22:53 **[ТС]**

vovandr, эхъ а жаль если это так
nokados, ну в какойто мере это решение, но мне бы не хотелось прибегать к использованию пхп
по ссылочке гляну. спасибо

@Dmitriy119 · 18.10.2018, 10:43

А как это на пхп реализовать?

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,224

	Объединить два изображения 25.02.2014, 17:22. Показов 9788. Ответов 6 Метки нет (Все метки) Допустим есть у нас две радио кнопки, в value у них путь к картинкам. Как эти две картинки объединить в одну и вывести в блок ? т.е выбрали одну радио кнопку, в блок попадает это изображение, выбрали вторую радио кнопку и эти изображения соединяются в одно, не друг на друга, а именно в одно цельное изображение Как вообще в js или jquery склеивать изображения ? 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,224
	25.02.2014, 21:29 [ТС]
	Вот мне интересно как сделать чтобы скачивались как единое целое, на пхп у меня такое реализовать получилось, а вот с яваскриптом сложнее, никакой информации по этому поводу не нашел к сожалению. 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,224
	25.02.2014, 22:53 [ТС]
	vovandr, эхъ а жаль если это так nokados, ну в какойто мере это решение, но мне бы не хотелось прибегать к использованию пхп по ссылочке гляну. спасибо 0

@Dmitriy119 0 / 0 / 0 Регистрация: 12.10.2018 Сообщений: 19
	18.10.2018, 10:43
	А как это на пхп реализовать? 0

Объединить два изображения

Решение