Antichat снова доступен.
Форум Antichat (Античат) возвращается и снова открыт для пользователей.
Здесь обсуждаются безопасность, программирование, технологии и многое другое.
Сообщество снова собирается вместе.
Новый адрес: forum.antichat.xyz
 |
|
18.01.2009, 01:52
|
|
Участник форума
Регистрация: 28.07.2008
Сообщений: 158
Провел на форуме:
728470
Репутация:
115
|
|
Сообщение от geforce
НУЖЕН НЕМНОГО ДРУГОЙ СКРИПТ
НАДА ЧТОБ НА КАРТИНКЕ МОЖНО БЫЛО ВЫДЕЛИТЬ ОПРЕДЕЛЁНУЮ ЧАСТЬ ПРИ НАЖАТИИ ДАЛЕЕ ОНА ОБРЕЗАЛАСЬ
1) если ты нажмешь на картинке и начнешь тянуть мышь для выделения некоторые браузеры будут тянуть полупрозрачную картинку за курсором. В качестве выхода вижу вычислять джаваскриптом при загрузке размер картинки и заменять ее на див, с бэкгроундом являющимся этой картинкой.
2) Дальше проще, на onmousedown сохраняешь координаты курсора x1,y1, на onmouseup сохраняешь координаты x2,y2.
3) Далее вычисляешь положение самого дива на странице, пусть координаты его верхнего левого угла будут x3,y3. Получаешь координаты обрезки на картинке путем вычисления разницы координат.
4) Через DOM меняешь свойство бэкгроунд на <script.php?x1=111&y1=111&x2=111&y2=111>.
5) Пишешь пхп скрипт который возвращает в браузер обрезанную картинку по координатам исходя из гет параметров.
Дерзай =)
Последний раз редактировалось prescott; 18.01.2009 в 01:54..
|
|
|
18.01.2009, 02:00
|
|
Динозавр
Регистрация: 10.01.2008
Сообщений: 2,841
Провел на форуме:
9220514
Репутация:
3338
|
|
http://us3.php.net/manual/en/function.imagecopy.php
прямо там наглядный ПЕРВЫЙ ЖЕ пример с логотипом php и представлен:
ДО
ПОСЛЕ
PHP код:
<?php
// Create image instances
$src = imagecreatefromgif('php.gif');
$dest = imagecreatetruecolor(80, 40);
// Copy
imagecopy($dest, $src, 0, 0, 20, 13, 80, 40);
// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);
imagedestroy($dest);
imagedestroy($src);
?>
|
|
|
|
18.01.2009, 02:05
|
|
Постоянный
Регистрация: 21.08.2008
Сообщений: 302
Провел на форуме:
458686
Репутация:
-25
|
|
Сообщение от prescott
1) если ты нажмешь на картинке и начнешь тянуть мышь для выделения некоторые браузеры будут тянуть полупрозрачную картинку за курсором. В качестве выхода вижу вычислять джаваскриптом при загрузке размер картинки и заменять ее на див, с бэкгроундом являющимся этой картинкой.
2) Дальше проще, на onmousedown сохраняешь координаты курсора x1,y1, на onmouseup сохраняешь координаты x2,y2.
3) Далее вычисляешь положение самого дива на странице, пусть координаты его верхнего левого угла будут x3,y3. Получаешь координаты обрезки на картинке путем вычисления разницы координат.
4) Через DOM меняешь свойство бэкгроунд на <script.php?x1=111&y1=111&x2=111&y2=111>.
5) Пишешь пхп скрипт который возвращает в браузер обрезанную картинку по координатам исходя из гет параметров.
Дерзай =)
Размер выделения известен это размер стандартного аватара в форуме его нада как бы перетаскивать по изоброжению! А нет не у кого такого скрипта просто я в джава не варю!???
|
|
|
|
18.01.2009, 02:11
|
|
Участник форума
Регистрация: 28.07.2008
Сообщений: 158
Провел на форуме:
728470
Репутация:
115
|
|
Если не варишь в джава тем более стоит разобраться, добьешься реализации сам - удвоишь а то и утроишь свои познания. Задавай вопросы в чем загвоздка тут тебе точно помогут =)
|
|
|
|
18.01.2009, 02:12
|
|
Постоянный
Регистрация: 30.08.2007
Сообщений: 773
Провел на форуме:
3069349
Репутация:
808
|
|
http://marqueetool.net/examples/send-cropped-image-coordinates-to-the-server/
|
|
|
|
18.01.2009, 02:16
|
|
Постоянный
Регистрация: 21.08.2008
Сообщений: 302
Провел на форуме:
458686
Репутация:
-25
|
|
Сообщение от prescott
Если не варишь в джава тем более стоит разобраться, добьешься реализации сам - удвоишь а то и утроишь свои познания. Задавай вопросы в чем загвоздка тут тебе точно помогут =)
Как я понял нада на джава написать скрипт перемещения квадрата (див) и передовать переменые с кординатами е в пхп код для обрезки! Так?
Допустим я знаю как осуществить в пхп обрезку!
С чего начать в джава?
|
|
|
|
18.01.2009, 02:38
|
|
Участник форума
Регистрация: 28.07.2008
Сообщений: 158
Провел на форуме:
728470
Репутация:
115
|
|
Создай полупрозрачную png картинку нужного размера. Вставь ее на страницу со свойством display: none. На событие onload вешаешь функцию которая позиционирует ее поверх картинки. Типа так:
Код HTML:
<html>
<head>
<script>
function gebi(el) {
return document.getElementById(el);
}
// функция вычисляет координаты объекта
function pos(el)
{
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent)
{
var tmp = pos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
}
// устанавливаем координаты для пнг картинки
function setPos() {
// вычислим координаты нашей авы
var p=pos(gebi('kn'));
// переместим картинку на эти же координаты
gebi('kv').style.left=p.x;
gebi('kv').style.top=p.y;
// показываем ее
gebi('kv').style.display='block';
}
</script>
</head>
<body onLoad='setPos();'>
<img src='img/avafon.png' style='display: none; position: absolute; top: 0px; left: 0px;' id='kv'>
Content Content Content Content<br>
Content Content Content Content<img src='img/ava.jpg' id='kn'>
</body>
</html>
Далее на событие onclick картинки вешаешь функцию, перемещающую пнг относительно курсора. Как перемещать картинки ты уже знаешь =)
http://rapidshare.com/files/185136799/www.rar.html - пример с картинками
Последний раз редактировалось prescott; 18.01.2009 в 02:46..
|
|
|
|
18.01.2009, 03:00
|
|
Постоянный
Регистрация: 21.08.2008
Сообщений: 302
Провел на форуме:
458686
Репутация:
-25
|
|
Сообщение от prescott
Создай полупрозрачную png картинку нужного размера. Вставь ее на страницу со свойством display: none. На событие onload вешаешь функцию которая позиционирует ее поверх картинки. Типа так:
Код HTML:
<html>
<head>
<script>
function gebi(el) {
return document.getElementById(el);
}
// функция вычисляет координаты объекта
function pos(el)
{
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent)
{
var tmp = pos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
}
// устанавливаем координаты для пнг картинки
function setPos() {
// вычислим координаты нашей авы
var p=pos(gebi('kn'));
// переместим картинку на эти же координаты
gebi('kv').style.left=p.x;
gebi('kv').style.top=p.y;
// показываем ее
gebi('kv').style.display='block';
}
</script>
</head>
<body onLoad='setPos();'>
<img src='img/avafon.png' style='display: none; position: absolute; top: 0px; left: 0px;' id='kv'>
Content Content Content Content<br>
Content Content Content Content<img src='img/ava.jpg' id='kn'>
</body>
</html>
Далее на событие onclick картинки вешаешь функцию, перемещающую пнг относительно курсора. Как перемещать картинки ты уже знаешь =)
http://rapidshare.com/files/185136799/www.rar.html - пример с картинками А как зделать чтоб avafon.png можно было перетаскивать по ava.jpg ??
И как добавить прозвачность в скрипте avafon???
|
|
|
|
18.01.2009, 03:05
|
|
Участник форума
Регистрация: 28.07.2008
Сообщений: 158
Провел на форуме:
728470
Репутация:
115
|
|
Сообщение от geforce
А как зделать чтоб avafon.png можно было перетаскивать по ava.jpg ??
И как добавить прозвачность в скрипте avafon???
http://designcollector.ru/png-v1 тут о прозрачности. Перетаскивание картинки ща доделаю.
|
|
|
|
18.01.2009, 03:12
|
|
Участник форума
Регистрация: 28.07.2008
Сообщений: 158
Провел на форуме:
728470
Репутация:
115
|
|
Модифицировал скрипт. Теперь при щелчке на аву пнг перетаскивается. Тебе осталось только сделать кнопку "Обрезать", при щелчке на которую будет срабатывать пхп скрипт обрезания картинки по координатам.
Код:
<html>
<head>
<script>
function gebi(el) {
return document.getElementById(el);
}
// функция вычисляет координаты объекта
function pos(el)
{
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent)
{
var tmp = pos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
}
// устанавливаем координаты для пнг картинки
function setPos() {
// вычислим координаты нашей авы
var p=pos(gebi('kn'));
// переместим картинку на эти же координаты
gebi('kv').style.left=p.x;
gebi('kv').style.top=p.y;
// показываем ее
gebi('kv').style.display='block';
}
// положение курсора
function getCursorPosition(e) {
var IE = document.all?true:false;
var tempX = 0; var tempY = 0;
if (IE) {
tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop;
} else {
tempX = e.pageX; tempY = e.pageY;}
if (tempX < 0) {tempX = 0;}
if (tempY < 0) {tempY = 0;}
return {"x":tempX, "y":tempY};
}
// функция перемещает пнг при событии онклик на картинке
function newsetpng(cur) {
// вычислим новые координаты пнг картинки
var left=cur.x-gebi('kv').offsetWidth/2;
var top=cur.y-gebi('kv').offsetHeight/2;
// если новые координаты вылазят за пределы авы - сдвигаем ее максимум к краю
var p=pos(gebi('kn'));
if (left<p.x) left=p.x;
if (top<p.y) top=p.y;
if (left>p.x+gebi('kn').offsetWidth-gebi('kv').offsetWidth) left=p.x+gebi('kn').offsetWidth-gebi('kv').offsetWidth;
if (top>p.y+gebi('kn').offsetHeight-gebi('kv').offsetHeight) top=p.y+gebi('kn').offsetHeight-gebi('kv').offsetHeight;
// применяем координаты
gebi('kv').style.left=left;
gebi('kv').style.top=top;
}
</script>
</head>
<body onLoad='setPos();'>
<img src='img/avafon.png' style='display: none; position: absolute; top: 0px; left: 0px;' id='kv' onClick='var cur=getCursorPosition(event); newsetpng(cur);'>
Content Content Content Content<br>
Content Content Content Content<img src='img/ava.jpg' id='kn' onClick='var cur=getCursorPosition(event); newsetpng(cur);'>
</body>
</html>
Последний раз редактировалось prescott; 18.01.2009 в 03:39..
|
|
|
|
|
|
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|
Похожие темы
Линейный вид
