사진 찍고 서버로 업로드 하는 예제 (with Node.js)

퓨즈[Fusetools]를 이용해 앱에서 사진을 찍고 서버로 업로드 하는 예제를 만들었습니다. Nodejs 서버도 함께 들어 있고요. 깃헙의 가이드를 따라하면 어렵지 않게 테스트 하실 수 있으실거에요. 🙂

전체 소스 다운로드 ::
https://github.com/englekk/Fusetools_ImageUploadSample

[[ MainView.ux ]]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<App Background="#ccc" >

    <Uploader ux:Global="Uploader" />
   
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var Camera = require("FuseJS/Camera");
        var CameraRoll = require("FuseJS/CameraRoll");
        var ImageTools = require("FuseJS/ImageTools");
        var Uploader = require("Uploader");

        var print = debug_log;
        var uploadUrl = 'http://192.168.0.169:3000/upload';// 서버 IP를 변경하세요.

        var sendPictureBtnEnabled = Observable(false);
        var targetImgPath = Observable();

        function takePicture()
        {
            Camera.takePicture().then(function(image)
            {
                var args = { desiredWidth:320, desiredHeight:320 , mode:ImageTools.SCALE_AND_CROP, performInPlace:true };
                ImageTools.resize(image, args).then(function(resizedImage) {
                    targetImgPath.value = resizedImage.path;
                    sendPictureBtnEnabled.value = true;

                    CameraRoll.publishImage(resizedImage);
                }).catch(function(reason) {
                    console.log("Couldn't resize image: " + reason);
                });
            }).catch(function(reason) {
                console.log("Couldn't take picture: " + reason);
            });
        };

        function sendPicture()
        {
            Uploader.send(targetImgPath.value, uploadUrl).then(function(response) {
                console.log("upload complete.");
                console.log(JSON.stringify(response));
            });
        }

        module.exports = {
            targetImgPath,
            takePicture,
            sendPicture,
            sendPictureBtnEnabled
        }
    </JavaScript>

    <ClientPanel>
        <!-- 촬영한 사진 유무에 따라 이미지 보여주기 Begin -->
        <WhileEmpty Items="{targetImgPath}">
            <Image File="assets/cam_icon.png" StretchMode="PixelPrecise"/>
        </WhileEmpty>
        <WhileNotEmpty Items="{targetImgPath}">
            <Image File="{targetImgPath}" StretchMode="Uniform" />
        </WhileNotEmpty>
        <!-- 촬영한 사진 유무에 따라 이미지 보여주기 End -->

        <StackPanel Dock="Bottom">
            <Basic.Button Text="Take picture (320x320)" Clicked="{takePicture}"/>
            <Basic.Button Text="Send Picture" Clicked="{sendPicture}" IsEnabled="{sendPictureBtnEnabled}"/>
        </StackPanel>
    </ClientPanel>
</App>

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles