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

@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

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

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

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

	Объединить два изображения 25.02.2014, 17:22. Показов 9794. Ответов 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

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

Решение