ห้ามพลาด! สร้างระบบ Crop ตกแต่งรูปภาพด้วย API Dropbox


วันนี้เป็นการนำเอา API ของผู้ให้บริการใน้รื่องของการฝากไฟล์บนระบบ cloud รายใหญ่ที่หลายคนอาจจะรู้จักดีคือ dropbox เมื่อไม่นานมานี้ dropbox ได้เปิดบริการ API รูปแบบใหม่ที่สามารถจะนำไฟล์ที่ถูกเก็บไว้ใน Dropbox สามารถที่จะเอามาเก็บไว้ในเว็บไซต์ต่างได้ผ่าน API ตัวนี้ Dropbox api โดยวันนี้เราก็จะมาลองใช้เจ้า Api ตัวนี้กันโดยการทำงานง่ายๆคือการ crop รูปภาพที่เราฝากไว้ใน Dropbox นั้นเองหรือบางคนอาจจะใช้บริการซิ้งภาพจากอุปกรณ์เคลือนที่ของเรา โดยเราสามารถนำภาพที่เรามีนั้นมาปรับแต่งโดยการ Crop และสามารถที่จะเก็บไว้ในเว็บไซต์ของเราหรือผู้ที่ให้บริการ crop ภาพจาก dropbox ก็ได้ เราลองมาดูตัวอย่างกันดีกลัวครับ



โดยรูปแบบการแสดงผลนี้จะใช้โปรแกรม bootstrap จากผู้ให้บริการสังคมออนไลน์ชื่อดังอย่าง twitter ในการเขียน JavaScript, jQuery, Bootstrap Jcrop และ script.js เช่น ไฟล์ index.html นี้

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
< !DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Dropbox File Uploader With Twitter Bootstrap | Tutorialzine แปลและแนะนำโดย soraya.in.th</title>
        <!-- The stylesheets soraya.in.th-->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css"  />
        <link rel="stylesheet" href="assets/Jcrop/jquery.Jcrop.min.css" />
        <link rel="stylesheet" href="assets/css/styles.css"  />
    </head>
    <body>
        <div id="main">
            <input type="dropbox-chooser" name="selected-file" id="db-chooser"
                       data-link-type="direct" class="hide" />
            <div id="content"></div>
            <button class="btn btn-inverse hide" type="button"
                       id="cropButton">Crop Image</button>
            <!-- Bootstrap Modal Dialogs -->
            <div id="cropModal" class="modal hide fade" role="dialog"
                       aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                       aria-hidden="true">×</button>
                    <h4>Your cropped image</h4>
                </div>
                <div class="modal-body center"></div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
            <div id="errorModal" class="modal hide fade" role="dialog" aria-hidden="true">
                <div class="modal-header">
                    <h4></h4>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" data-dismiss="modal"
                       aria-hidden="true">OK</button>
                </div>
            </div>
            <div id="progressModal" class="modal hide fade" role="dialog" aria-hidden="true">
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 100%;"></div>
                </div>
            </div>
        </div>
        <!-- JavaScript Includes -->
        <script src="https://www.dropbox.com/static/api/1/dropbox.js"
           id="dropboxjs" data-app-key="z4ylr6z1qlivll4"></script>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/Jcrop/jquery.Jcrop.min.js"></script>
        <script src="assets/js/script.js"></script>
    </body>
</html>


ขั้นตอนต่อมาคือการขอ api จาก dropbox โดยสามารถสมัครขอใช้ api ได้ที่ https://www.dropbox.com/developers/apps คลิกที่ภาพเพื่อดูภาพใหญ่ๆๆ


จากภาพด้านบนเราสามารถทำตามขั้นตอนดังกล่าวและเมื่อได้ app key มาแล้วเราก็เอามาใสที่ไฟล์ index.html ตัวอย่างด้านบนแล้ว save up ขึ้น host ของเราแล้วลอง run ดูครับ


ส่วนโค้ดไฟล์ต่างที่เหลือก็จะเป็นส่วนของไฟล์ jquery css js และก็ php เช่น crop.php ที่ทำหน้าที่ในการ crop ภาพตามที่เราต้องการ

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
$filename_length = 10;
$dir = 'tmp/'; // where to store the cropped images
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['src'])) {
    $src = $_POST['src'];
    $coordinates = $_POST['coordinates'];
    $url = parse_url($src);
    $info = get_headers($src, 1);
    // Only allow photos from dropbox
    if ($url['host'] == 'dl.dropbox.com') {
        if ($info['Content-Type'] == 'image/jpeg' && $info['Content-Length'] < 1024*1024) {
            // Cache the remote file locally
            $cache = $dir . md5($src);
            if(!file_exists($cache)){
                file_put_contents($cache, file_get_contents($src));
            }
            // Original image
            $img = imagecreatefromjpeg($cache);
            // New image with the width and height of the crop
            $dst = imagecreatetruecolor($coordinates['w'], $coordinates['h']);
            // Copy and resize it depending on the crop area
            imagecopyresampled($dst, $img, 0, 0, $coordinates['x'], $coordinates['y'],
                $coordinates['w'], $coordinates['h'], $coordinates['w'], $coordinates['h']);
            // Generate a temporary name and write the file to disk
            $name = substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyz".
                        "ABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, $filename_length);
            imagejpeg($dst, $dir . $name . '.jpg');
            // Print it for jQuery
            echo $dir . $name . '.jpg';
        } else {
            echo 1;
        }
    } else {
        echo 2;
    }
}


เท่านี้เราก็จะได้การ corp ภาพจากการใช้งาน api ของ dropboox เรียบร้อยแล้วครับเป็นไงบ้างลองไปใช้งานและประยุคดูครับน่าสนใจที่เดียว
ดาวน์โหลดโค้ด…..!!!



ขอบคุณข้อมูลจาก http://tutorialzine.com

Comments

comments

Powered by Facebook Comments