Question

我使用插件ScriptCam基本上用网络摄像头拍照。我想在用户点击＆＃34;快照到图像＆＃34;后保存img。它可以通过网络浏览器下载，现在好了，最终目标是将img下载到特定的目标文件夹，我希望这可以在不使用任何PHP的情况下工作。

我的代码：

    <!DOCTYPE html>
<html>
    <head>
        <script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script language="JavaScript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script language="JavaScript" src="scriptcam.js"></script>
        <script language="JavaScript"> 
            $(document).ready(function() {
                $("#webcam").scriptcam({
                    showMicrophoneErrors:false,
                    onError:onError,
                    cornerRadius:20,
                    cornerColor:'e3e5e2',
                    onWebcamReady:onWebcamReady,
                    uploadImage:'upload.gif',
                    onPictureAsBase64:base64_tofield_and_image
                });
            });
            function base64_tofield() {
                $('#formfield').val($.scriptcam.getFrameAsBase64());
            };
            function base64_toimage() {
                $('#image').attr("src","data:image/png;base64,"+$.scriptcam.getFrameAsBase64());
            };
            function base64_tofield_and_image(b64) {
                $('#formfield').val(b64);
                $('#image').attr("src","data:image/png;base64,"+b64);
            };
            function changeCamera() {
                $.scriptcam.changeCamera($('#cameraNames').val());
            }
            function onError(errorId,errorMsg) {
                $( "#btn1" ).attr( "disabled", true );
                $( "#btn2" ).attr( "disabled", true );
                alert(errorMsg);
            }           
            function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
                $.each(cameraNames, function(index, text) {
                    $('#cameraNames').append( $('<option></option>').val(index).html(text) )
                }); 
                $('#cameraNames').val(camera);
            }
        </script> 
    </head>
    <body>
        <div style="width:330px;float:left;">
            <div id="webcam">
            </div>
            <div style="margin:5px;">
                <img src="webcamlogo.png" style="vertical-align:text-top"/>
                <select id="cameraNames" size="1" onChange="changeCamera()" style="width:245px;font-size:10px;height:25px;">
                </select>
            </div>
        </div>
        <div style="width:135px;float:left;">
            <p><button class="btn btn-small" id="btn2" onclick="base64_toimage()">Snapshot to image</button></p>
        </div>
        <div style="width:200px;float:left;">
            <p><img id="image" style="width:200px;height:153px;"/></p>
        </div>

        <a href="#" class="downloadAsImage hide" download>Download</a>

        <script type="text/javascript">
            $(function() {
                html2canvas($('.main'), {
                    onrendered: function(canvas) {
            $('.downloadAsImage').attr('href', canvas.toDataURL()).removeClass('hide');
        }
    });
});
        </script>
    </body>
</html>

我真的很难过。底部的脚本将保存整个页面，当它执行此操作时，img甚至不会保存到页面中。我只想保存进入

的img

<div style="width:200px;float:left;">
        <p><img id="image" style="width:200px;height:153px;"/></p>
    </div>

通过网络浏览器保存Img

0 个答案: