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

dolte

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

dolte

Вывести картинку в принципе просто. Понадобится такой html код
<input type='radio' name='image' value='zmeyka.bmp'/>
<input type='radio' name='image' value='getImage.jpg'/>
 
<div id='image'></div><!--Здесь будут картинки-->
А в JS пиши:
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

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


dolte

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


dolte

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


dolte

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