| Rompo | 14.12.2013 16:00 |
Визуально так:
1)
2)CLICK =>
3)
4)Нажимаем сохранить, фото и описание из текстареа улетают в пхп обработчик.
1)
2)CLICK =>
3)
4)Нажимаем сохранить, фото и описание из текстареа улетают в пхп обработчик.
Работа с 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 |
А в какой строчке происходят манипуляции с текстарией? Чет не вижу.
|
изначально скрипт без нее. вот я и хочу узнать, как можно ее туда прикрутить?
вот в это место, я думаю:
$('#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;
});
|
Визуально так:
1) 2)CLICK => 3) 4)Нажимаем сохранить, фото и описание из текстареа улетают в пхп обработчик. |
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);//отправляем текст
}
|
Тогда я добавляю вызов функции в
$('#uploadButton').click(function(){
webcam.upload();
webcam.reset();
sendText(); //СЮДА
togglePane();
return false;
});
и получаю текст с помощью, как я думаю: $text = $_REQUEST['text']; или $text = $_POST['text']; но ни то, ни другое не срабатывает.. в чем моя ошибка? |
Цитата:
|
А можно какой-нибудь пример? я похоже не правильно вас понял.
попробовал запихать функцию в 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);//отправляем текст
},
|
Так тебе вторым запросом отдельно можно передать описание? А как сервер свяжет эти два запроса? Надо какой-то айдишник или что передавать. В любом случае два запроса - это плохо.
this.get_movie()._upload - получается эта функция делает запрос? А где ее код? И может она предоставляет хук для добавления своих данных? |
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х запросов не работает, а одним отправить не знаю как. И еще можешь объяснить, что такое хук? Он функцию вызывает или как? |
Это код функции get_movie. А где код _upload? Вобще странно, get_movie возвращает DOM-элемент, откуда у него возьмется метод _upload ? Муть какая-то....
Цитата:
Цитата:
|
Вот смотри, есть еще такая штука:
// hooks описаны в глобальных переменных
hooks: {
onLoad: null,
onComplete: null,
onError: null
}, // callback hook functions
// а далее 2 функции с постфиксом hook.
// где еще есть хуки и как они описаны, я не нашел
set_hook: function(name, callback) {
// set callback hook
// supported hooks: onLoad, onComplete, onError
if (typeof(this.hooks[name]) == 'undefined')
return alert("Hook type not supported: " + name);
this.hooks[name] = callback;
},
fire_hook: function(name, value) {
// fire hook callback, passing optional value to it
if (this.hooks[name]) {
if (typeof(this.hooks[name]) == 'function') {
// callback is function reference, call directly
this.hooks[name](value);
}
else if (typeof(this.hooks[name]) == 'array') {
// callback is PHP-style object instance method
this.hooks[name][0][this.hooks[name][1]](value);
}
else if (window[this.hooks[name]]) {
// callback is global function name
window[ this.hooks[name] ](value);
}
return true;
}
return false; // no hook defined
},
полный код файла webcam.js :
window.webcam = {
version: '1.0.9',
// globals
ie: !!navigator.userAgent.match(/MSIE/),
protocol: location.protocol.match(/https/i) ? 'https' : 'http',
callback: null, // user callback for completed uploads
swf_url: 'webcam.swf', // URI to webcam.swf movie (defaults to cwd)
shutter_url: 'shutter.mp3', // URI to shutter.mp3 sound
api_url: '', // URL to upload script
loaded: false, // true when webcam movie finishes loading
quality: 90, // JPEG quality (1 - 100)
shutter_sound: true, // shutter sound effect on/off
stealth: false, // stealth mode (do not freeze image upon capture)
hooks: {
onLoad: null,
onComplete: null,
onError: null
}, // callback hook functions
set_hook: function(name, callback) {
// set callback hook
// supported hooks: onLoad, onComplete, onError
if (typeof(this.hooks[name]) == 'undefined')
return alert("Hook type not supported: " + name);
this.hooks[name] = callback;
},
fire_hook: function(name, value) {
// fire hook callback, passing optional value to it
if (this.hooks[name]) {
if (typeof(this.hooks[name]) == 'function') {
// callback is function reference, call directly
this.hooks[name](value);
}
else if (typeof(this.hooks[name]) == 'array') {
// callback is PHP-style object instance method
this.hooks[name][0][this.hooks[name][1]](value);
}
else if (window[this.hooks[name]]) {
// callback is global function name
window[ this.hooks[name] ](value);
}
return true;
}
return false; // no hook defined
},
set_api_url: function(url) {
// set location of upload API script
this.api_url = url;
},
set_swf_url: function(url) {
// set location of SWF movie (defaults to webcam.swf in cwd)
this.swf_url = url;
},
get_html: function(width, height, server_width, server_height) {
// Return HTML for embedding webcam capture movie
// Specify pixel width and height (640x480, 320x240, etc.)
// Server width and height are optional, and default to movie width/height
if (!server_width) server_width = width;
if (!server_height) server_height = height;
var html = '';
var flashvars = 'shutter_enabled=' + (this.shutter_sound ? 1 : 0) +
'&shutter_url=' + escape(this.shutter_url) +
'&width=' + width +
'&height=' + height +
'&server_width=' + server_width +
'&server_height=' + server_height;
if (this.ie) {
html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="webcam_movie" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+this.swf_url+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/></object>';
}
else {
html += '<embed id="webcam_movie" src="'+this.swf_url+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="webcam_movie" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" />';
}
this.loaded = false;
return html;
},
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;
},
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);//отправляем текст
},
set_stealth: function(stealth) {
// set or disable stealth mode
this.stealth = stealth;
},
snap: function(url, callback, stealth) {
// take snapshot and send to server
// 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);
if (typeof(stealth) != 'undefined') this.set_stealth( stealth );
this.get_movie()._snap( this.api_url, this.quality, this.shutter_sound ? 1 : 0, this.stealth ? 1 : 0 );
},
freeze: function() {
// freeze webcam image (capture but do not upload)
this.get_movie()._snap('', this.quality, this.shutter_sound ? 1 : 0, 0 );
},
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();
},
reset: function() {
// reset movie after taking snapshot
this.get_movie()._reset();
},
configure: function(panel) {
// open flash configuration panel -- specify tab name:
// "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
if (!panel) panel = "camera";
this.get_movie()._configure(panel);
},
set_quality: function(new_quality) {
// set the JPEG quality (1 - 100)
// default is 90
this.quality = new_quality;
},
set_shutter_sound: function(enabled, url) {
// enable or disable the shutter sound effect
// defaults to enabled
this.shutter_sound = enabled;
this.shutter_url = url ? url : 'shutter.mp3';
},
flash_notify: function(type, msg) {
// receive notification from flash about event
switch (type) {
case 'flashLoadComplete':
// movie loaded successfully
this.loaded = true;
this.fire_hook('onLoad');
break;
case 'error':
// HTTP POST error most likely
if (!this.fire_hook('onError', msg)) {
alert("JPEGCam Flash Error: " + msg);
}
break;
case 'success':
// upload complete, execute user callback function
// and pass raw API script results to function
this.fire_hook('onComplete', msg.toString());
break;
default:
// catch-all, just in case
alert("jpegcam flash_notify: " + type + ": " + msg);
break;
}
}
};
может сможешь помочь разобраться что к чему? :) |
Тут нет объявления функции _upload
|
в IDE у меня эта функция подсвечивается как "unresolved", где она объявлена я так и не нашел. муть какая-то
Тогда может пойти другим путем: вот есть 2 запроса, как их в один можно объединить и на сервер отправить, или 2 этих запроса обработать? Можно какой-нибудь маленький пример? |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 01:02. |