Question

我正在尝试使用网络摄像头捕获的图像，并希望显示在网页上，并希望存储它。这里我的代码试图将捕获的图像转换为Base64格式，但它无法转换为Base64.Kindly给我解决方案我怎么能把它转换成Base64。

我的代码是：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <script src="/static/webcam/New/jquery-1.7.1.min.js" type="text/javascript">   </script>      
    <script src="/static/webcam/New/webcam.js" type="text/javascript"></script>
    <script type="text/javascript">

        function showWebcam(){ 
            $("#camera").webcam({
                width: 320,
                height: 240,
                mode: "callback",
                swffile: "/static/webcam/jscam.swf",

                quality: 100,

                onCapture:  function () {
                },
                onTick:     function () {},
                onSave:     function () {},
                onLoad:     function () {},

                debug: function(type, string) {
                    $('#wcStatus').append(type + ": " + string + '<br /><br />');
                }      
            }); 
        }


        function capture_image(){ 



            void(0);

            var canvas = document.getElementById('canvas');
            var context = canvas.getContext("2d");
            //                var img = canvas.toDataURL("image/png");
            var img = canvas.toDataURL();

            alert(img);
            var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ;
            alert(item_image);


            document.getElementById('myImg').src=item_image;

        }


    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
 </head>
 <body>
    <div id="camera"></div>    
    <div id="camList"></div>
    <div id="wcStatus"></div>    
    <button onclick="showWebcam();">Use Webcam Instead</button>    
    <button onclick="javascript:capture_image();">Take a picture!</button>
    <div id="capture_images"><input id="capture_image" type="hidden" value=""    name="capture[image]"></div>

    <img id="myImg" src="face.png" border=1> 
    <p><canvas id="canvas" width="320" height="240"> </canvas>

    </p>
</body>
</html>

数据未转换为Base64

0 个答案: