Skip to content

Commit 740918f

Browse files
RubaXaRubaXa
committed
#131: FileAPI.Image + WebCam documentation
1 parent 927a15b commit 740918f

File tree

2 files changed

+184
-4
lines changed

2 files changed

+184
-4
lines changed

‎README.md

Lines changed: 91 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,14 @@ If you need a CORS, then edit the `crossdomain.xml` and put it in the root of re
2323
<script>
2424
window.FileAPI = {
2525
debug: false // debug mode, see Console
26-
, cors: true // if used CORS
26+
, cors: false // if used CORS, set `true`
27+
, media: false // if used WebCam, set `true`
2728
, staticPath: '/js/FileAPI/dist/' // path to '*.swf'
29+
, postNameConcat: function (name, idx){
30+
// Default: object[foo]=1&object[bar][baz]=2
31+
// .NET: https://github.com/mailru/FileAPI/issues/121#issuecomment-24590395
32+
return name + (idx != null ? '['+ idx +']' : '');
33+
}
2834
};
2935
</script>
3036
<script src="/js/FileAPI/dist/FileAPI.min.js"></script>
@@ -674,6 +680,7 @@ FileAPI.Image(imageFile).get(function (err/**String*/, img/**HTMLElement*/){
674680

675681
---
676682

683+
<a name="FileAPI.Image.crop"></a>
677684
### crop(width`:Number`, height`:Number`)`:FileAPI.Image`
678685
Crop image by width and height.
679686

@@ -706,6 +713,7 @@ FileAPI.Image(imageFile)
706713

707714
---
708715

716+
<a name="FileAPI.Image.resize"></a>
709717
### resize(width`:Number`, height`:Number`[, type`:String`])`:FileAPI.Image`
710718
Resize image.
711719

@@ -732,6 +740,7 @@ FileAPI.Image(imageFile)
732740

733741
---
734742

743+
<a name="FileAPI.Image.preview"></a>
735744
### preview(width`:Number`[, height`:Number`])`:FileAPI.Image`
736745
Crop and resize image.
737746

@@ -749,6 +758,7 @@ FileAPI.Image(imageFile)
749758

750759
---
751760

761+
<a name="FileAPI.Image.rotate"></a>
752762
### rotate(deg`:Number`)`:FileAPI.Image`
753763
Rotate image.
754764

@@ -765,6 +775,7 @@ FileAPI.Image(imageFile)
765775

766776
---
767777

778+
<a name="FileAPI.Image.filter"></a>
768779
### filter(callback`:Function`)`:FileAPI.Image`
769780
Apply filter function. Only `HTML5`.
770781

@@ -805,6 +816,7 @@ FileAPI.Image(imageFile)
805816

806817
---
807818

819+
<a name="FileAPI.Image.overlay"></a>
808820
### overlay(images`:Array`)`:FileAPI.Image`
809821
Add overlay images, eg: watermark.
810822

@@ -827,13 +839,91 @@ FileAPI.Image(imageFile)
827839

828840
---
829841

842+
<a name="FileAPI.Image.get"></a>
830843
### get(fn`:Function`)`:FileAPI.Image`
831844
Get the final image.
832845

833846
* fn — complete callback
834847

835848
---
836849

850+
<a name="FileAPI.Camera"></a>
851+
## FileAPI.Camera
852+
To work with a webcam, be sure to set `FileAPI.media: true`.
853+
854+
855+
<a name="FileAPI.Camera.publish"></a>
856+
### publish(el`:HTMLElement`, options`:Object`, callback`:Function`)`:void`
857+
Publication of the camera.
858+
859+
* el — target
860+
* options — { `width: 100%`, `height: 100%`, `start: true` }
861+
* callback — the first parameter is a possible error, the second instance of FileAPI.Camera
862+
863+
```js
864+
var el = document.getElementById('cam');
865+
FileAPI.Camera.publish(el, { width: 320, height: 240 }, function (err, cam/**FileAPI.Camera*/){
866+
if( !err ){
867+
// The webcam is ready, you can use it.
868+
}
869+
});
870+
```
871+
872+
---
873+
874+
<a name="FileAPI.Camera.start"></a>
875+
### start(callback`:Function`)`:void`
876+
Turn on the camera.
877+
878+
* callback — will be called when the camera ready
879+
880+
```js
881+
var el = document.getElementById('cam');
882+
FileAPI.Camera.publish(el, { start: false }, function (err, cam/**FileAPI.Camera*/){
883+
if( !err ){
884+
// Turn on
885+
cam.start(function (err){
886+
if( !err ){
887+
// The camera is ready for use.
888+
}
889+
});
890+
}
891+
});
892+
```
893+
894+
---
895+
896+
<a name="FileAPI.Camera.stop"></a>
897+
### stop()`:void`
898+
Turn off the camera.
899+
900+
---
901+
902+
<a name="FileAPI.Camera.shot"></a>
903+
### shot()`:FileAPI.Image`
904+
Take a picture with the camera.
905+
906+
```js
907+
var el = document.getElementById('cam');
908+
FileAPI.Camera.publish(el, function (err, cam/**FileAPI.Camera*/){
909+
if( !err ){
910+
var shot = cam.shot(); // take a picture
911+
912+
// create thumbnail 100x100
913+
shot.preview(100).get(function (err, img){
914+
previews.appendChild(img);
915+
});
916+
917+
// and/or
918+
FileAPI.upload({
919+
url: '...',
920+
files: { cam: shot
921+
});
922+
}
923+
});
924+
```
925+
926+
---
837927
838928
<a name="const" data-name="Сonst"></a>
839929
## Сonstants

‎README.ru.md

Lines changed: 93 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,15 @@
2323
```html
2424
<script>
2525
window.FileAPI = {
26-
debug: false // дебаг режим, смотрите Console
27-
, cors: true // если используете CORS
26+
debug: false // дебаг режим, смотрите Console
27+
, cors: false // если используете CORS -- `true`
28+
, media: false // если используете веб-камеру -- `true`
2829
, staticPath: '/js/FileAPI/dist/' // путь к '*.swf'
30+
, postNameConcat: function (name, idx){
31+
// Default: object[foo]=1&object[bar][baz]=2
32+
// .NET: https://github.com/mailru/FileAPI/issues/121#issuecomment-24590395
33+
return name + (idx != null ? '['+ idx +']' : '');
34+
}
2935
};
3036
</script>
3137
<script src="/js/FileAPI/dist/FileAPI.min.js"></script>
@@ -673,6 +679,7 @@ FileAPI.Image(imageFile).get(function (err/**String*/, img/**HTMLElement*/){
673679

674680
---
675681

682+
<a name="FileAPI.Image.crop"></a>
676683
### crop(width`:Number`, height`:Number`)`:FileAPI.Image`
677684
Кроп изображения по ширине и высоте.
678685

@@ -705,6 +712,7 @@ FileAPI.Image(imageFile)
705712

706713
---
707714

715+
<a name="FileAPI.Image.resize"></a>
708716
### resize(width`:Number`, height`:Number`[, type`:String`])`:FileAPI.Image`
709717
Ресайз.
710718

@@ -731,6 +739,7 @@ FileAPI.Image(imageFile)
731739

732740
---
733741

742+
<a name="FileAPI.Image.preview"></a>
734743
### preview(width`:Number`[, height`:Number`])`:FileAPI.Image`
735744
Кроп и ресайз изображения.
736745

@@ -748,6 +757,7 @@ FileAPI.Image(imageFile)
748757

749758
---
750759

760+
<a name="FileAPI.Image.rotate"></a>
751761
### rotate(deg`:Number`)`:FileAPI.Image`
752762
Поворот.
753763

@@ -764,6 +774,7 @@ FileAPI.Image(imageFile)
764774

765775
---
766776

777+
<a name="FileAPI.Image.filter"></a>
767778
### filter(callback`:Function`)`:FileAPI.Image`
768779
Применить фильтр функцию. Только `HTML5`.
769780

@@ -804,6 +815,7 @@ FileAPI.Image(imageFile)
804815

805816
---
806817

818+
<a name="FileAPI.Image.overlay"></a>
807819
### overlay(images`:Array`)`:FileAPI.Image`
808820
Добавить наложение, например: водяной знак.
809821

@@ -826,13 +838,92 @@ FileAPI.Image(imageFile)
826838

827839
---
828840

841+
<a name="FileAPI.Image.get"></a>
829842
### get(fn`:Function`)`:FileAPI.Image`
830843
Получить итоговое изображение.
831844

832845
* fn — функция обратного вызова
833846

834847
---
835848

849+
<a name="FileAPI.Camera"></a>
850+
## FileAPI.Camera
851+
Для работы с веб-камерой, обязательно установить параметр `FileAPI.media: true`.
852+
853+
854+
<a name="FileAPI.Camera.publish"></a>
855+
### publish(el`:HTMLElement`, options`:Object`, callback`:Function`)`:void`
856+
Публикация камеры.
857+
858+
* el — куда публикуем
859+
* options — { `width: 100%`, `height: 100%`, `start: true` }
860+
* callback — первый параметр возможная ошибка, второй экземпляр FileAPI.Camera
861+
862+
```js
863+
var el = document.getElementById('cam');
864+
FileAPI.Camera.publish(el, { width: 320, height: 240 }, function (err, cam/**FileAPI.Camera*/){
865+
if( !err ){
866+
// Камера готова, можно использовать
867+
}
868+
});
869+
```
870+
871+
---
872+
873+
<a name="FileAPI.Camera.start"></a>
874+
### start(callback`:Function`)`:void`
875+
Включить камеру
876+
877+
* callback — будет вызван в момент готовности камеры
878+
879+
```js
880+
var el = document.getElementById('cam');
881+
FileAPI.Camera.publish(el, { start: false }, function (err, cam/**FileAPI.Camera*/){
882+
if( !err ){
883+
// Включаем камеру
884+
cam.start(function (err){
885+
if( !err ){
886+
// камера готова к использованию
887+
}
888+
});
889+
}
890+
});
891+
```
892+
893+
---
894+
895+
<a name="FileAPI.Camera.stop"></a>
896+
### stop()`:void`
897+
Выключить камеру
898+
899+
---
900+
901+
<a name="FileAPI.Camera.shot"></a>
902+
### shot()`:FileAPI.Image`
903+
Сделать снимок с камеры
904+
905+
```js
906+
var el = document.getElementById('cam');
907+
FileAPI.Camera.publish(el, function (err, cam/**FileAPI.Camera*/){
908+
if( !err ){
909+
var shot = cam.shot(); // делаем снимок
910+
911+
// создаем предпросмотр 100x100
912+
shot.preview(100).get(function (err, img){
913+
previews.appendChild(img);
914+
});
915+
916+
// и/или загружаем
917+
FileAPI.upload({
918+
url: '...',
919+
files: { cam: shot
920+
});
921+
}
922+
});
923+
```
924+
925+
---
926+
836927
837928
<a name="const" data-name="Сonst"></a>
838929
## Константы
@@ -938,7 +1029,6 @@ FileAPI.Image(imageFile)
9381029
Флеш очень "глючная" штука :]
9391030
Поэтому в случае успешной загрузки http status должен быть только `200 OK`.
9401031
941-
9421032
<a name="flash.settings"></a>
9431033
### Settings
9441034
Настройки для flash части.

0 commit comments

Comments
 (0)