Dark Wizard
Гуру форума
- Регистрация
- 23 Сен 2007
- Сообщения
- 194
- Реакции
- 80
- Автор темы
- #1
На входе две картинки с прозрачностью, пользователь должен иметь возможность двигать и менять масштаб нижней, в результате получить 3 поля значений (координаты картинки и новый масштаб), чтобы я в дальнейшем склеил их через php (либо если есть готовая реализация на html5 было бы отлично).
Главное, чтобы было удобно и кроссбраузерно.
Текущий вариант Для просмотра ссылки Войдиили Зарегистрируйся
код:
Вроде не очень сложно - бюджет 500р.
Также, если есть какая-то готовая библиотека (подобного простого онлайн фоторедактора) - можно сделать через неё, если там нет копирайтов/вотермарков. Дополнительные опции типа поворота/фильтров будут большим плюсом.
Главное, чтобы было удобно и кроссбраузерно.
Текущий вариант Для просмотра ссылки Войди
код:
Код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Демо</title>
<style>
#fon{
z-index:10;
display:block;
position:absolute;
}
#ufoto{
z-index:5;
display:block;
position: absolute;
}
#ucontainer{
position:absolute;
background-color:#FFFFFF;
border: 1px solid #000000;
display:block;
z-index:10;
width:800px;
height:600px;
overflow:hidden;
}
#ucontrols{
display:block;
position:absolute;
top:630px;
}
</style>
<script>
function fmove(){
xpos = document.getElementById('xpos').value;
ypos = document.getElementById('ypos').value;
uzoom = document.getElementById('uzoom').value;
document.getElementById('ufoto').style.left = xpos + 'px';
document.getElementById('ufoto').style.top = ypos + 'px';
document.getElementById('ufoto').style.zoom = uzoom + '%';
document.getElementById('test').value = document.getElementById('xpos').value;
document.getElementById('test2').value = document.getElementById('ypos').value;
document.getElementById('test3').value = document.getElementById('uzoom').value + ' %';
}
</script>
</head>
<body bgcolor="#CCCCCC"><form>
<div id="ucontainer" style="">
<div id="fon"><img src="ded.png" width="800" height="600" alt=""></div>
<img src="kid.jpg" alt="" id="ufoto">
</div>
<div id="ucontrols">
x: <input type="range" step="1" min="-400" max="400" value="0" id="xpos" onchange="fmove();" style="width:800px"><br>
y: <input type="range" step="1" min="-400" max="400" value="0" id="ypos" onchange="fmove();" style="width:800px"><br>
r: <input type="range" step="1" min="30" max="200" value="100" id="uzoom" onchange="fmove();" style="width:800px"><br>
<input type="text" id="test" /> <input type="text" id="test2" /> <input type="text" id="test3" /> <br><br>
</div>
</form>
</body>
</html>Вроде не очень сложно - бюджет 500р.
Также, если есть какая-то готовая библиотека (подобного простого онлайн фоторедактора) - можно сделать через неё, если там нет копирайтов/вотермарков. Дополнительные опции типа поворота/фильтров будут большим плюсом.
