Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.12.2013, 17:04
Интересующийся
Отправить личное сообщение для Rompo Посмотреть профиль Найти все сообщения от Rompo
 
Регистрация: 25.02.2012
Сообщений: 14

Работа с textarea
Нашел скрипт для управления веб-камерой, все работает, все замечательно, но возникла проблема с добавлением описания к сделанным фото. Дело с том, что после того, как предварительно захватив изображение, появляются кнопки "переснять" и "сохранить", я попытался добавить еще элемент формы textarea, но вот собственно сам текст не удается обработать, пытался передавать его обычным POST, но думаю php тут не обойтись, а js у меня плоховато Может кто-нибудь подскажет, поможет как это сделать?

$(document).ready(function(){
	
	var camera = $('#camera'),
	    photos = $('#photos'),
	    screen =  $('#screen');

	var template = '<a href="uploads/original/{src}" rel="cam" '
		+'style="background-image:url(uploads/thumbs/{src})"></a>';

	/*----------------------------------
		Установки веб камеры
	----------------------------------*/


	webcam.set_swf_url('assets/webcam/webcam.swf');
	webcam.set_api_url('upload.php');		// Скрипт загрузки
	webcam.set_quality(80);				// Качество фотографий JPEG
	webcam.set_shutter_sound(true, 'assets/webcam/shutter.mp3');

	// Генерируем код HTML для камеры и добавляем его на страницу:	
	screen.html(
		webcam.get_html(screen.width(), screen.height())
	);


/*------------------------------
	Обработчики событий
-------------------------------*/


var shootEnabled = false;
	
$('#shootButton').click(function(){
	
	if(!shootEnabled){
		return false;
	}
	
	webcam.freeze();
	togglePane();
	return false;
});

$('#cancelButton').click(function(){
	webcam.reset();
	togglePane();
	return false;
});

$('#uploadButton').click(function(){
	webcam.upload();
	webcam.reset();
	togglePane();
	return false;
});

camera.find('.settings').click(function(){
	if(!shootEnabled){
		return false;
	}
	
	webcam.configure('camera');
});

// Показываем и скрываем панель камеры:

var shown = false;
$('.camTop').click(function(){
	
	$('.tooltip').fadeOut('fast');
	
	if(shown){
		camera.animate({
			bottom:-466
		});
	}
	else {
		camera.animate({
			bottom:-5
		},{easing:'easeOutExpo',duration:'slow'});
	}
	
	shown = !shown;
});

$('.tooltip').mouseenter(function(){
	$(this).fadeOut('fast');
});


/*---------------------- 
	Возвратные вызовы
----------------------*/


webcam.set_hook('onLoad',function(){
	// Когда FLASH загружен, разрешаем доступ 
	// к кнопкам "Снимаю" и "Установка"
	shootEnabled = true;
});

webcam.set_hook('onComplete', function(msg){
	
	// Данный ответ возвращается upload.php
	// и содержит имя изображения в формате объекта JSON
	
	
	msg = $.parseJSON(msg);
	
	if(msg.error){
		alert(msg.message);
	}
	else {
		// Добавляем его на страницу
		photos.prepend(templateReplace(template,{src:msg.filename}));
		initFancyBox();
	}
});

webcam.set_hook('onError',function(e){
	screen.html(e);
});


Далее получаем jpeg-файл

<?php
session_start();
include ("blocks/bd.php");
/*
	Данный скрипт получает снимок JPEG
	из webcam.swf как запрос POST.
*/
// Нам нужно обрабатывать только запрос POST:
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit;
}

$folder = 'uploads/';
$filename = md5($_SERVER['REMOTE_ADDR'].rand()).'.jpg';

$original = $folder.$filename;

// Снимок JPEG отправляется в необработанном виде:
$input = file_get_contents('php://input');

if(md5($input) == '7d4df9cc423720b7f1f3d672b89362be'){
	// Черное изображение. Нам оно без надобности.
	exit;
}

$result = file_put_contents($original, $input);
if (!$result) {
	echo '{
		"error"		: 1,
		"message"	: "Ошибка сохранения изображения. Убедитесь, что папка uploads и ее вложенные каталоги имеет chmod 777."
	}';
	exit;
}

$info = getimagesize($original);
if($info['mime'] != 'image/jpeg'){
	unlink($original);
	exit;
}

// Перемещаем временный файл в оригинальную папку:
rename($original,'uploads/original/'.$filename);
$original = 'uploads/original/'.$filename;

// Используем библиотеку GD для изменения размера
// для миниатюры:

$w = 260;
$origImage	= imagecreatefromjpeg($original);
$w_src    = imagesx($origImage);
$h_src    = imagesy($origImage);
$newImage	= imagecreatetruecolor($w,$w);
imagecopyresampled($newImage,$origImage,0,0,round((max($w_src,$h_src)-min($w_src,$h_src))/2),0,$w,$w,min($w_src,$h_src),min($w_src,$h_src));

imagejpeg($newImage,'uploads/thumbs/'.$filename);
$date = date("Y-m-d");

$result = mysql_query ("INSERT INTO photos (id_user,photo,p_date) VALUES('$_SESSION[id]','$filename','$date')");

echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}';
?>


в таблице photos есть еще одно поле description, в него то и хотел записывать текст из textarea
Ответить с цитированием
  #2 (permalink)  
Старый 14.12.2013, 03:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А в какой строчке происходят манипуляции с текстарией? Чет не вижу.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 14.12.2013, 14:45
Интересующийся
Отправить личное сообщение для Rompo Посмотреть профиль Найти все сообщения от Rompo
 
Регистрация: 25.02.2012
Сообщений: 14

изначально скрипт без нее. вот я и хочу узнать, как можно ее туда прикрутить?

вот в это место, я думаю:

$('#shootButton').click(function(){
     
    if(!shootEnabled){
        return false;
    }
     
    webcam.freeze();
    togglePane();
    return false;
});

$('#cancelButton').click(function(){
    webcam.reset();
    togglePane();
    return false;
});
 
$('#uploadButton').click(function(){
    webcam.upload();
    webcam.reset();
    togglePane();
    return false;
});

/* наверное здесь должна быть еще одна функция с обработкой текста из текстареа*/


а потом дать доступ к текстареа, помимо "снимаю" и "установка"

webcam.set_hook('onLoad',function(){
    // Когда FLASH загружен, разрешаем доступ
    // к кнопкам "Снимаю" и "Установка"
    shootEnabled = true;
});
Ответить с цитированием
  #4 (permalink)  
Старый 14.12.2013, 15:00
Интересующийся
Отправить личное сообщение для Rompo Посмотреть профиль Найти все сообщения от Rompo
 
Регистрация: 25.02.2012
Сообщений: 14

Визуально так:
1)
2)CLICK =>
3)
4)Нажимаем сохранить, фото и описание из текстареа улетают в пхп обработчик.
Ответить с цитированием
  #5 (permalink)  
Старый 14.12.2013, 16:45
Профессор
Отправить личное сообщение для l-liava-l Посмотреть профиль Найти все сообщения от l-liava-l
 
Регистрация: 14.03.2012
Сообщений: 1,808

Rompo,
function sendText() {

            var req = new XMLHttpRequest(),
                text = document.getElementById('textarea').value;

            req.onreadystatechange = function() {
                if (req.readyState == 4) {

                    if(req.status == 200) {

                        //ловим ответ от сервера
                    }

                }
            };
            
            req.open('POST', 'urlTo_file.php', true);
            req.send(text);//отправляем текст

        }
__________________
Научу себя плохому
Ответить с цитированием
  #6 (permalink)  
Старый 14.12.2013, 19:23
Интересующийся
Отправить личное сообщение для Rompo Посмотреть профиль Найти все сообщения от Rompo
 
Регистрация: 25.02.2012
Сообщений: 14

Тогда я добавляю вызов функции в

$('#uploadButton').click(function(){
    webcam.upload();
    webcam.reset();
    sendText(); //СЮДА
    togglePane();
    return false;
});


и получаю текст с помощью, как я думаю:

$text = $_REQUEST['text'];
или
$text = $_POST['text'];

но ни то, ни другое не срабатывает.. в чем моя ошибка?

Последний раз редактировалось Rompo, 14.12.2013 в 20:21.
Ответить с цитированием
  #7 (permalink)  
Старый 15.12.2013, 02:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Rompo
    webcam.upload();
То есть эта функция загружает файл на сервер? Дык потроши ее исходник, чтобы добавить в запрос еще и текст описания. Или может через "хук" можно что-нибудь сделать.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 15.12.2013, 07:07
Интересующийся
Отправить личное сообщение для Rompo Посмотреть профиль Найти все сообщения от Rompo
 
Регистрация: 25.02.2012
Сообщений: 14

А можно какой-нибудь пример? я похоже не правильно вас понял.

попробовал запихать функцию в webcam.upload(), но тоже ничего не получилось:

upload: function(url, callback) {
		// upload image to server after taking snapshot
		// specify fully-qualified URL to server API script
		// and callback function (string or function object)
		if (callback) this.set_hook('onComplete', callback);
		if (url) this.set_api_url(url);
		
		this.get_movie()._upload( this.api_url );
        this.sendText(); // вызов вот здесь
	},


в описание функции добавил просто этот код:
sendText: function(){
       var req = new XMLHttpRequest(),
            text = document.getElementById('text_descr').value;

        req.onreadystatechange = function() {
            if (req.readyState == 4) {

                if(req.status == 200) {

                    alert('!!!');
                }

            }
        };
        req.open('POST', 'upload.php', true);
        req.send(text);//отправляем текст
    },
Ответить с цитированием
  #9 (permalink)  
Старый 15.12.2013, 08:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Так тебе вторым запросом отдельно можно передать описание? А как сервер свяжет эти два запроса? Надо какой-то айдишник или что передавать. В любом случае два запроса - это плохо.
this.get_movie()._upload - получается эта функция делает запрос? А где ее код? И может она предоставляет хук для добавления своих данных?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 15.12.2013, 09:49
Интересующийся
Отправить личное сообщение для Rompo Посмотреть профиль Найти все сообщения от Rompo
 
Регистрация: 25.02.2012
Сообщений: 14

get_movie: function() {
		// get reference to movie object/embed in DOM
		if (!this.loaded) return alert("ERROR: Movie is not loaded yet");
		var movie = document.getElementById('webcam_movie');
		if (!movie) alert("ERROR: Cannot locate movie 'webcam_movie' in DOM");
		return movie;
	},


Я тоже подумал, что из-за 2х запросов не работает, а одним отправить не знаю как.

И еще можешь объяснить, что такое хук? Он функцию вызывает или как?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обновить textarea wp2 Events/DOM/Window 6 03.02.2012 22:44
Работа с текстом, выделенным в textarea (opera+ff) Белый шум Общие вопросы Javascript 12 21.01.2012 00:54
Работа с textarea zsaz jQuery 1 11.11.2010 06:21
Работа с textarea bookin jQuery 9 29.10.2010 14:59
Работа с textarea. MadGest AJAX и COMET 1 07.08.2010 10:26