Question

JSfiddle的链接在这里：http://jsfiddle.net/dyx9jsxa/

我只是尝试在本地运行相同的事情，如此示例所示，但似乎photobooth.js永远不会加载。我究竟做错了什么？任何帮助将不胜感激。

以下是本地HTML文件中的代码：

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo</title>

      <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>




      <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
      <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">


          <script type='text/javascript' src="http://wolframhempel.github.io/photobooth-js/photobooth_min.js"></script>


      <style type='text/css'>
        #photo {
        height: 300px;
        width: 380px;
    }
    #gallery {
        margin: 5px 0;
        background: #f6f6f6;
    }
      </style>



    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $(document).ready(function () {
        var file = null;
        $('#photo').photobooth().on("image", function (event, dataUrl) {
            file = dataURLtoBlob(dataUrl);
            var size = file.size;
            alert("Picture size: " + size);
            uploadImage(file);
            $("#gallery").append('<img src="' + dataUrl + '" >');
        });
    });

 // (Commented out due to not having this file) 
 //    $(function() {
 //           var coords = $('.photobooth.T').faceDetection();
 //           console.log(coords);    
 //       });


    function dataURLtoBlob(dataUrl) {
        // Decode the dataURL    
        var binary = atob(dataUrl.split(',')[1]);

        // Create 8-bit unsigned array
        var array = [];
        for (var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }

        // Return our Blob object
        return new Blob([new Uint8Array(array)], {
            type: 'image/png'
        });
    }

    function uploadImage(file) {
        var fd = new FormData();
        // Append our Canvas image file to the form data
        fd.append("files", file);
        fd.append("album", $("#album").val());
        fd.append("albumkey", $("#albumkey").val());
        // And send it
        $.ajax({
            url: "https://lambda-face-recognition.p.mashape.com/recognize",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("X-Mashape-Authorization", $("#mashapeKey").val());
            }
        }).done(function (result) {
            alert("Received response..");
            var resultObject = JSON.stringify(result);
            alert(resultObject);
        });
    }
    });//]]>  

    </script>


    </head>
    <body>
      <div id="photo"></div>
    <h3>Sample Code for Face Recognition in Javascript (Mashape)</h3>
    <h4>Tutorial link <a target="_blank" href="http://blog.mashape.com/post/45712257463/face-recognition-using-javascript-and-mashape">here</a>.  Look at the top, the app is requesting access to your webcam.</h4>  
    1. Mashape key: 
    <br/>&nbsp;&nbsp;&nbsp;
    <input type="text" id="mashapeKey" value="wEaHZBmxkZsQAcXjyPd8koe1vWzqgkjC" />
    <br/>2. album: 
    <br/>&nbsp;&nbsp;&nbsp;
    <input type="text" id="album" value="apitraveler" />
    <br/>3.albumkey: 
    <br/>&nbsp;&nbsp;&nbsp;
    <input type="text" id="albumkey" value="c2de7705a8dfd6056fe0cfb9e486e55ca62bde9ba41fd5990f0d0d8b87aa193f" />
    <div id="gallery"></div>

    </body>


    </html>

Answer 1

问题在于

src='//code.jquery.com/jquery-1.9.1.js'

在//之前添加http：你会很好

使用所谓的“推荐”方法的原因不适用于 locall 文件，因为在src / href中排除协议导致的协议用于加载要用于src / href的包含页面

因此，尝试使用网址//code.jquery.com/jquery-1.9.1.js来抓取file:///stuff.html等网页上的file://code.jquery.com/jquery-1.9.1.js - 至少这是Chrome尝试做的事情 - 我看不到什么是Firefox试图做任何事情，除非说它甚至没有尝试从任何地方加载jquery-1.9.1.js

Answer 2

如果您正在使用photobooth.js 必须按以下顺序包含以下文件

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jqueryIntegration.js"></script>
    <script type="text/javascript" src="js/Photobooth.js"></script>
    <script type="text/javascript" src="js/Tools.js"></script>
    <script type="text/javascript" src="js/Drag.js"></script>
    <script type="text/javascript" src="js/Slider.js"></script>
    <script type="text/javascript" src="js/ResizeHandle.js"></script>

然后定义

    <script type='text/javascript'>
        $( '#example' ).photobooth().on( "image", function( event, dataUrl ){
            $( "#gallery" ).show().html( '<img src="' + dataUrl + '" >');
        });


        /**
         * Tab boxes
         */
        $( '.tab_container' ).each(function( i, elem ){
            $( elem ).find( ".tabs li" ).click(function(){

                $( elem ).find( ".tabs li.selected" ).removeClass( "selected" );
                $( this ).addClass( "selected" );
                $( elem ).find( ".tab_content" ).hide();
                $( elem ).find( ".tab_content." + $(this).attr( "calls" ) ).show();
            });
        });

        /**
         * Link highlighting
         */
        $( "a" ).click(function(){
            $( "#nav a.selected" ).removeClass( "selected" );
            $( "#nav a[href=" + $(this).attr( "href" ) + "]" ).addClass( "selected" );
        });

    </script>

我想在网页上使用photobooth.js。它适用于JsFiddle，但不适用于本地。做什么？

2 个答案: