В этой небольшой статейке я расскажу как создавать аватар с помощью WEB камеры, как сделано например в facebook.
Заходим сюда и качаем плагин.
Скомпилированая флешка и JavaScript лежат в htdocs, из этой директории нам нужны следующие файлы:
webcam.swf
webcam.js
shutter.mp3 (Это по вкусу, он нужен для проигрывания звука при создании снимка)
Подключаем js скрипт (у меня например все скрипты лежат в static/js):
<script type="text/javascript" src="{% get_static_prefix %}js/webcam.js"></script>
Вставляем в нашу страницу следующий код:
<script language="JavaScript">
// URL вьюхи которая будет сохранять изображение
webcam.set_api_url("{% url my_django_view %}");
// Качество JPEG (1 - 100)
webcam.set_quality(90);
// Проигрываем звук при снимке.
webcam.set_shutter_sound(true);
// Подключаем флешку
webcam.set_swf_url("{% get_static_prefix %}swf/webcam.swf");
// Подключаем звук снимка(не обязательно)
webcam.set_shutter_url("{% get_static_prefix %}snd/shutter.mp3");
// Если нужно выполнять какието действия,
// например перейти на другую страницу,
// после сохранения снимка, нужно добавить следующее
webcam.set_hook('onComplete', 'callback_function');
function callback_function(response) {
// response это ответ возвращаемый вьюхой my_django_view,
// в данном случае возвращается json:
// {"status": true} или {"status": false}
var json = JSON.parse(response);
if (json.status) {
window.location = "{% url next_view %}";
}
}
// Вставляем flash объект в страницу
document.write(webcam.get_html(320, 240));
</script>
Далее в документе добавляем ссылку, при клике на которую будет создаваться фото.
<a href="#" onclick="webcam.snap(); return false;">Сделать фото</a>
Теперь сама вьюха:
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
import json
@csrf_exempt
def my_django_view(request):
image = request.raw_post_data
filename = '/path/to/save/image/img.jpeg'
if image:
fd = open(filename, 'wa')
fd.write(image)
fd.close()
return HttpResponse(json.dumps({'status': True}),
mimetype='application/json')
else:
return HttpResponse(json.dumps({'status': False}),
mimetype='application/json')
Ну тут все просто, получаем raw_post_data сохраняем все это в файл filename и возвращаем статус.
Все :)