飞码网-免费源码博客分享网站

点击这里给我发消息

Dropbox文件上传器与Twitter的Bootstrap|-Javascript教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

几周前,Dropbox引入了一项新颖的功能-Dropbox Chooser。通过将其嵌入到您的网站中,可以为用户提供一个按钮,用户可以使用该按钮附加在线存储中的文件。

今天,我们将使用此功能来创建一个简单的应用程序,使人们可以从其Dropbox帐户附加照片,使用Jcrop插件裁剪区域并下载结果。此外,我们将使用Twitter Bootstrap显示对话框窗口,并在后端使用PHP进行实际的照片裁剪。

HTML

首先,这是我们将使用的HTML文档。首先,我将介绍引导程序的样式表,Jcrop插件和我们的自定义CSS文件。在页脚中,我们有Dropbox JavaScript库,jQuery,Bootstrap,Jcrop和script.js,我们将在下一部分中进行编写。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Dropbox File Uploader With Twitter Bootstrap | Tutorialzine </title>

        <!-- The stylesheets -->
        <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"  />
            <div id="content"></div>
            <button  type="button"
                        id="cropButton">Crop Image</button>

            <!-- Bootstrap Modal Dialogs -->

            <div id="cropModal"  role="dialog"
                        aria-hidden="true">
                <div >
                    <button type="button"  data-dismiss="modal"
                        aria-hidden="true">×</button>
                    <h4>Your cropped image</h4>
                </div>
                <div ></div>
                <div >
                    <button  data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>

            <div id="errorModal"  role="dialog" aria-hidden="true">
                <div >
                    <h4></h4>
                </div>
                <div >
                    <button  data-dismiss="modal"
                        aria-hidden="true">OK</button>
                </div>
            </div>

            <div id="progressModal"  role="dialog" aria-hidden="true">
                <div >
                    <div  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>

在文档正文中,我们还具有Twitter Bootstrap将用来显示模式对话框的标记。我们有三种具有唯一ID的模式:#cropModal#errorModal#progressModal它们通过简单的jQuery函数调用显示(稍后会详细介绍)。

熟悉标记,因为它是Bootstrap的标准配置。模态可能具有可选的页眉,正文和页脚,并已适当设置样式。您可以在其中放入任何HTML。通过指定类,可以更改对话框的行为。隐藏的aria属性用于隐藏屏幕阅读器中的内容。按钮具有data-dismiss="modal"属性,该属性指示引导程序应在按钮上绑定事件侦听器,并在单击按钮时关闭模式窗口。

注意:这里我们仅使用Bootstrap的模式功能,但是该框架提供了更多功能。在此处阅读有关模式对话框的信息,或在其站点周围查看更多信息。
dropbox-chooser.jpg
 

jQuery

jQuery的工作是侦听Dropbox按钮上的事件,使用选定的图像初始化Jcrop,并将AJAX请求发送到crop.php这是代码的大致概述:

assets/js/script.js

$(document).ready(function() {

    var cropButton      = $('#cropButton'),
        dbChooser       = $("#db-chooser"),
        errorModal      = $('#errorModal'),
        errorMessage    = errorModal.find('h4'),
        progressBar     = $('#progressModal'),
        cropModal       = $('#cropModal'),
        content         = $('#content');

    var coordinates, src,
        name, type,
        imgWidth, imgHeight,
        newWidth, newHeight,
        ratio, jcrop;

    dbChooser.on("DbxChooserSuccess", function(e) {

        // Here we will listen when a file is
        // chosen from dropbox, insert it into the page
        // and initialize the Jcrop plugin

    });

    function showCropButton(c) {
        // This function will called when we want to show
        // the crop button. This is executed when we have
        // made a selection with Jcrop.
    }

    function showError(err){
        // This function will display an error dialog
    }

    cropButton.click(function() {

        // This will send an AJAX requst to crop.php
        // with the dimensions of the crop area and
        // the URL of the image.

    });
});

第一步是为您的Dropbox Chooser创建一个密钥。我不得不说,这是我所见过的最简单,经过深思熟虑的开发人员页面-生成应用程序密钥直接嵌入其中,并且易于使用。只需点击“设置”部分中的“创建新应用”链接,然后填写您的详细信息(“域”字段应包含将在其上使用按钮的域;出于开发目的,您可能还希望包括localhost)。这将为您提供可以在页面上使用的密钥和嵌入代码-在index.html中将其替换为我的代码。

现在我们有了一个功能正常的按钮,我们必须为成功事件设置事件监听功能。事件对象将包含来自Dropbox的图片网址,以及文件大小,名称和缩略图之类的属性:

dbChooser.on("DbxChooserSuccess", function(e) {
    // Assigning the original event object, so we have access
    //to the files property passed by Dropbox:
    e = e.originalEvent;

    name = e.files[0].name;
    src = e.files[0].link;

    type = name.split('.');
    type = type[1] || '';

    if (type.toLowerCase() != 'jpg') {
        showError('This file type is not supported! Choose a jpg.');
        return false;
    }

    if (e.files[0].bytes > 1024*1024) {
        showError('Please choose an image smaller than 1MB!');
        return false;
    }

    // If we have previously initialized jCrop:

    if(jcrop){
        jcrop.destroy();
        cropButton.hide();
    }

    progressBar.modal('show');

    var img = $('<img>');

    img.load(function() {

        imgWidth = img.width();
        imgHeight = img.height();

        if (imgWidth >= 575 || imgHeight >= 575) {

            // The image is too large, resize it to fit a 575x575 square!

            if (imgWidth > imgHeight) {  // Wide

                ratio = imgWidth / 575;
                newWidth = 575;
                newHeight = imgHeight / ratio;

            } else {    // Tall or square

                ratio = imgHeight / 575;
                newHeight = 575;
                newWidth = imgWidth / ratio;

            }

        } else {

            ratio = 1;
            newHeight = imgHeight;
            newWidth = imgWidth;

        }

        // Remove the old styles
        img.removeAttr('style');

        // Set the new width and height
        img.width(newWidth).height(newHeight);

        // Initialize jCrop
        img.Jcrop({
            onChange : showCropButton,
            onSelect : showCropButton
        }, function(){
            // Save the jCrop instance locally
            jcrop = this;
        });

        // Hide the progress bar
        progressBar.modal('hide');
    });

    // Show the image off screen, so we can
    // calculate the width and height properly
    img.css({
        'position' : 'absolute',
        'top' : -100000,
        'left' : -100000,
        'visibility' : 'hidden',
        'display' : 'block'
    });

    // Set the SRC attribute and trigger the load
    // function when the image is downloaded

    content.html(img.attr('src', src));

});

当用户使用Jcrop进行选择时,将使用包含坐标,宽度和高度的对象调用showCropButton回调(有关更多示例,请参阅文档)。在该函数内部,我们根据所选区域的大小显示或隐藏#cropButton元素。

function showCropButton(c) {
    if (c.w == 0 || c.h == 0) {
        cropButton.hide();
    } else {
        cropButton.show();
        coordinates = c;
    }
}

最后,我们只需要编写用于显示错误并发送AJAX请求的函数。

function showError(err){
    errorMessage.text(err);
    errorModal.modal('show');
}

cropButton.click(function() {

    coordinates.x = Math.round(coordinates.x * ratio);
    coordinates.y = Math.round(coordinates.y * ratio);
    coordinates.w = Math.round(coordinates.w * ratio);
    coordinates.h = Math.round(coordinates.h * ratio);

    progressBar.modal('show');

    $.post('crop.php', {

        'coordinates' : coordinates,
        'src' : src

    }, function(r) {

        // Notice the "one" method - this
        // executes the callback only once

        progressBar.modal('hide').one('hidden', function() {

            cropModal.find('.modal-body').html('<img src="' + r + '" >');

            setTimeout(function() {
                cropModal.modal('show');
            }, 500);

        });

    });
});

大!我们现在有一个可行的例子。我们现在要做的实际上就是裁剪图像。为此,我们将编写一个简短的PHP脚本。

crop-image.jpg
 

PHP

该脚本将收到POST AJAX请求,其中包含原始Dropbox图像的URL和裁剪区域的坐标。然后它将使用GD Library函数调整其大小并将其写入磁盘。在退出之前,它将回显临时名称到作物,该临时名称将由jQuery显示。

crop.php

$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;
    }

}

这样,我们的Dropbox照片上传和裁剪示例就完成了!

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()
内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: