Question

我有一个简单的页面，可让您用手机拍照，然后将其上传到服务器。

为实现这一目标，我使用HTML5的输入作为文件，因此当我点击（或点击）选择文件时，会显示两个选项：

使用手机的相机（我使用带iOS8的iPhone）
从库中选择一张图片。

如果我从库中选择图片，一切都运行正常，因为现在我只在屏幕上显示它，但是如果我使用相机，在拍照后浏览器会崩溃。我还没能调试，因为调试会话崩溃后它从未到达我的断点。

这是代码。任何帮助将受到高度赞赏。

<!--Seg:openPage-->
<script>
function resizeImg(img, canvas, ctx){

    var MAX_WIDTH = 500;
    var MAX_HEIGHT = 300;
    var width = img.width;
    var height = img.height;

    alert(width + " " + height);

    if (width > height) {
        if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
    } else {
        if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
        }
    }

    canvas.width = width;
    canvas.height = height;
    //var ctx = canvas.getContext("2d");

    //var dataURL = canvas.toDataURL(img, 0.5);
    //img.src = dataURL; 

    ctx.drawImage(img, 0, 0, width, height);
}


function drawOnCanvas(file) {

      var reader = new FileReader();

      reader.onload = function (e) {

        var dataURL = e.target.result;
        var c = document.querySelector('canvas');
        var ctx = c.getContext('2d');
        var img = new Image();

        img.src = dataURL;
        //****img.onload = function() {
        //c.width = 200; //img.width;
        //c.height = 200; //img.height;
        if (img.complete) {
            resizeImg(img, c, ctx);
            //ctx.drawImage(img, 0, 0);
        } else {
            img.onload = function () {
                resizeImg(img, c, ctx);
                //ctx.drawImage(img, 0, 0);
            };
        }
        //ctx.drawImage(img, 0, 0);

        //****};
        //****img.src = dataURL;
    };

    reader.readAsDataURL(file); 
    }


function upload(file){

    var encodedB64 = window.btoa(file);
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend=function(){
        if(file){
            //reader.readAsDataURL(file);
            console.log(reader);
            //alert(reader.result);
            $('.output').val(reader.result);
        }

        submit_form('f','GO');
    }
}


$(document).ready(function(){

    var input = document.querySelector('input[type=file]');

    input.onchange = function () {
      var file = input.files[0];

      //upload(file);
      drawOnCanvas(file);   
      //displayAsImage(file); 
    };

});
</script>

<style>
/**
#canvas-container {
    width: 100%;
    height: 100%;
}

#canvas-container #myCanvas{
    width: 100%;
}**/
</style>
<div class="container" style="padding-top: 10px;">
<div id="page_content">
<form name="f" method="POST" action="@&PGM " class="sigPad">
    <input type="hidden" name="output" class="output">

    <!--Add file input-->
    <p>Choose a picture from your device or capture one with your camera now:</p>
    <input type="file" id="picManager" accept="image/*" capture="camera">

    <!--Add canvas-->
    <p>Photo:</p>
    <div id="canvas-container">
        <canvas id="myCanvas"></canvas>
    </div>

    <button type="submit" class="btn btn-primary">View</button>



</form>
</div>
</div>
<!--End:openPage-->

使用相机拍照时浏览器崩溃

0 个答案: