1

スナップショットを取得してjpgをサーバーにアップロードするこのプラグインがあります。今、関数 date('YmdHis') を使用しています。ファイルに名前を付けるには「.jpg」。しかし、html ファイルにファイル名を付けたいと思います。私は4つのファイルを持っています.HTMLを含むTEST.HTLM、JSを含むWEBCAM.JS、およびサーバー機能を含むTEST.PHPです。写真をTEST.PHPに渡すwebcam.swfファイルがあります。

どうもありがとう！

ここに私のコードがあります:

テスト.HTML

    <html lang="en">

    <body>
        <table><tr><td valign=top>
        <h1>WEB CAM Test Page</h1>

        NAME:<input id="name"><BR>

        <!-- First, include the JPEGCam JavaScript Library -->
        <script type="text/javascript" src="webcam.js"></script>

        <!-- Configure a few settings -->
        <script language="JavaScript">
            webcam.set_api_url( 'test.php' );
            webcam.set_quality( 90 ); // JPEG quality (1 - 100)
            webcam.set_shutter_sound( false ); // play shutter click sound
        </script>

        <!-- Next, write the movie to the page at 400x400 -->
        <script language="JavaScript">
            document.write( webcam.get_html(400, 400) );
        </script>

        <!-- Some buttons for controlling things -->
        <br/><form>
            <input type=button value="Capturar Foto" onClick="capturarFoto();">
        </form>
        <script>
        <!-- this function check if the user have already give a name to the span he is about to take --!>
        function capturarFoto(){
            if(document.getElementById("name").value != ""){
                take_snapshot();
            }else{
                alert("Please, name the photo before you take it.");
            }
        }
        </script>
        <!-- Code to handle the server response (see test.php) -->
        <script language="JavaScript">
            webcam.set_hook( 'onComplete', 'my_completion_handler' );

            function take_snapshot() {
                // take snapshot and upload to server
                document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
                webcam.snap();
            }

            function my_completion_handler(msg) {
                // extract URL out of PHP output
                if (msg.match(/(http\:\/\/\S+)/)) {
                    var image_url = RegExp.$1;
                    // show JPEG image in page
                    document.getElementById('upload_results').innerHTML = 
                        '<h1>Upload Successful!</h1>' + 
                        '<h3>JPEG URL: ' + image_url + '</h3>' + 
                        '<img src="' + image_url + '">';

                    // reset camera for another shot
                    webcam.reset();
                }
                else alert("PHP Error: " + msg);
            }
        </script>

        </td><td width=50>&nbsp;</td><td valign=top>
            <div id="upload_results" style="background-color:#eee;"></div>
        </td></tr></table>
    </body>
    </html>

JS ファイル window.webcam = { バージョン: '1.0.9',

// globals
ie: !!navigator.userAgent.match(/MSIE/),
protocol: location.protocol.match(/https/i) ? 'https' : 'http',
callback: null, // user callback for completed uploads
swf_url: 'webcam.swf', // URI to webcam.swf movie (defaults to cwd)
shutter_url: 'shutter.mp3', // URI to shutter.mp3 sound
api_url: '', // URL to upload script
loaded: false, // true when webcam movie finishes loading
quality: 90, // JPEG quality (1 - 100)
shutter_sound: true, // shutter sound effect on/off
stealth: false, // stealth mode (do not freeze image upon capture)
hooks: {
    onLoad: null,
    onComplete: null,
    onError: null
}, // callback hook functions

set_hook: function(name, callback) {
    // set callback hook
    // supported hooks: onLoad, onComplete, onError
    if (typeof(this.hooks[name]) == 'undefined')
        return alert("Hook type not supported: " + name);

    this.hooks[name] = callback;
},

fire_hook: function(name, value) {
    // fire hook callback, passing optional value to it
    if (this.hooks[name]) {
        if (typeof(this.hooks[name]) == 'function') {
            // callback is function reference, call directly
            this.hooks[name](value);
        }
        else if (typeof(this.hooks[name]) == 'array') {
            // callback is PHP-style object instance method
            this.hooks[name][0][this.hooks[name][1]](value);
        }
        else if (window[this.hooks[name]]) {
            // callback is global function name
            window[ this.hooks[name] ](value);
        }
        return true;
    }
    return false; // no hook defined
},

set_api_url: function(url) {
    // set location of upload API script
    this.api_url = url;
},

set_swf_url: function(url) {
    // set location of SWF movie (defaults to webcam.swf in cwd)
    this.swf_url = url;
},

get_html: function(width, height, server_width, server_height) {
    // Return HTML for embedding webcam capture movie
    // Specify pixel width and height (640x480, 320x240, etc.)
    // Server width and height are optional, and default to movie width/height
    if (!server_width) server_width = width;
    if (!server_height) server_height = height;

    var html = '';
    var flashvars = 'shutter_enabled=' + (this.shutter_sound ? 1 : 0) + 
        '&shutter_url=' + escape(this.shutter_url) + 
        '&width=' + width + 
        '&height=' + height + 
        '&server_width=' + server_width + 
        '&server_height=' + server_height;

    if (this.ie) {
        html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="webcam_movie" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+this.swf_url+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/></object>';
    }
    else {
        html += '<embed id="webcam_movie" src="'+this.swf_url+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="webcam_movie" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" />';
    }

    this.loaded = false;
    return html;
},

get_movie: function() {
    // get reference to movie object/embed in DOM
    if (!this.loaded) return alert("ERROR: Movie is not loaded yet");
    var movie = document.getElementById('webcam_movie');
    if (!movie) alert("ERROR: Cannot locate movie 'webcam_movie' in DOM");
    return movie;
},

set_stealth: function(stealth) {
    // set or disable stealth mode
    this.stealth = stealth;
},

snap: function(url, callback, stealth) {
    // take snapshot and send to server
    // specify fully-qualified URL to server API script
    // and callback function (string or function object)
    if (callback) this.set_hook('onComplete', callback);
    if (url) this.set_api_url(url);
    if (typeof(stealth) != 'undefined') this.set_stealth( stealth );

    this.get_movie()._snap( this.api_url, this.quality, this.shutter_sound ? 1 : 0, this.stealth ? 1 : 0 );
},

freeze: function() {
    // freeze webcam image (capture but do not upload)
    this.get_movie()._snap('', this.quality, this.shutter_sound ? 1 : 0, 0 );
},

upload: function(url, callback) {
    // upload image to server after taking snapshot
    // specify fully-qualified URL to server API script
    // and callback function (string or function object)
    if (callback) this.set_hook('onComplete', callback);
    if (url) this.set_api_url(url);

    this.get_movie()._upload( this.api_url );
},

reset: function() {
    // reset movie after taking snapshot
    this.get_movie()._reset();
},

configure: function(panel) {
    // open flash configuration panel -- specify tab name:
    // "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
    if (!panel) panel = "camera";
    this.get_movie()._configure(panel);
},

set_quality: function(new_quality) {
    // set the JPEG quality (1 - 100)
    // default is 90
    this.quality = new_quality;
},

set_shutter_sound: function(enabled, url) {
    // enable or disable the shutter sound effect
    // defaults to enabled
    this.shutter_sound = enabled;
    this.shutter_url = url ? url : 'shutter.mp3';
},

flash_notify: function(type, msg) {
    // receive notification from flash about event
    switch (type) {
        case 'flashLoadComplete':
            // movie loaded successfully
            this.loaded = true;
            this.fire_hook('onLoad');
            break;

        case 'error':
            // HTTP POST error most likely
            if (!this.fire_hook('onError', msg)) {
                alert("JPEGCam Flash Error: " + msg);
            }
            break;

        case 'success':
            // upload complete, execute user callback function
            // and pass raw API script results to function
            this.fire_hook('onComplete', msg.toString());
            break;

        default:
            // catch-all, just in case
            alert("jpegcam flash_notify: " + type + ": " + msg);
            break;
    }
}

};

PHPファイル

<?php

        /* JPEGCam Test Script */
        /* Receives JPEG webcam submission and saves to local file. */
        /* Make sure your directory has permission to write files as your web server user! */

        $filename = date('YmdHis') . '.jpg';
        $result = file_put_contents( $filename, file_get_contents('php://input') );
        if (!$result) {
            print "ERROR: Failed to write data to $filename, check permissions\n";
            exit();
        }

        $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;

        print $_SERVER['REQUEST_URI'];

        ?>

ここでPHPファイルでは、アップロードしている画像にランダムな名前を割り当てますが、これを行う方法からフォームから名前を割り当てたいです。

4

1 に答える 1

2

名前を GET 変数として渡してみることができます。次のように API URL を設定するときに、必要なファイル名を追加します。

webcam.set_api_url( 'test.php?filename=imagename' );

次にphpファイルで：

$filename = $_GET['filename'] . '.jpg';

それが役立つことを願っています。

于 2016-06-25T11:36:03.817 に答える