为什么生成渲染空图像文件的画布?

我的目标:

如果我的网站上的相机按钮被点击>打开智能手机相机>从qr-code拍一张照片>用js调整它的大小>在我的服务器上加载图片>读取qr-code>给我从qr-code返回的值

我的问题是，我的代码产生一个空的图像文件(jpg)，并给我一个错误。

我用上传一个现有的qr码图像来测试它，它在第二次尝试上传它时有效。在第一次尝试，我得到相同的错误，如果我试图上传从智能手机拍摄的照片。

<form id="qr-code-upload-form" class="form-group" action="" method="post" enctype="multipart/form-data">
    <label>
        <span id="qr-pic" class="glyphicon glyphicon-camera"></span>
        <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput" style="display: none;">
    </label>
    <canvas id="cnvsForFormat" width="400" height="266" style="display:none;"></canvas>
</form>

我的js/jquery

$(document).ready(function(){
    $('body').on("change", "#cameraInput", readCode);
    function readCode() {
        var cnvs=document.getElementById("cnvsForFormat");
        var input = document.getElementById('cameraInput').files[0];
        var img = new Image();
        if (input) {
            var reader = new FileReader();
            reader.onload = function (e) {
                //Get the input image file
                img.src = e.target.result;
                var newHeight = img.height/2;
                var newWidth = img.width/2;
                //reduce the size until its lower than 600px
                while (newWidth>600 || newHeight>600) {
                    newHeight = newHeight/2;
                    newWidth = newWidth/2;
                }
                $("#cnvsForFormat").attr("height",newHeight);
                $("#cnvsForFormat").attr("width",newWidth);
                //Draw the input image in a canvas with the right size for the upload
                var ctx=cnvs.getContext("2d");
                ctx.drawImage(img,0,0, newWidth, newHeight);
                var resizedImg = cnvs.toDataURL("image/jpeg");
                //Send the resized Image to my php-request-file
                $.post("?cmd=ajax&param=qr_verarbeiten",{photo:resizedImg},function(e) {
                    alert(e);
                });
            };
            reader.readAsDataURL(input);
        }
    };
});
</script>

我的PHP读取qr-code

if (isset($_GET['param']) && $_GET['param'] == "qr_verarbeiten" && isset($_POST['photo'])) {
$img = base64_decode(substr($_POST['photo'],23));
file_put_contents("img/upload/qr.jpg", $img);
$qrcode = new QrReader("img/upload/qr.jpg");
echo $qrcode->text(); 
}

我在这个项目中使用了jQuery, Bootstrap和SMARTY

我真的希望有人能帮助我!

感谢你花时间阅读这篇文章，我为我的糟糕英语道歉。

问题在js中。我已经添加了js/MegaPixImage库来处理我从iPhone相机获得的大文件-工作代码是:

 $(document).ready(function(){
    $('body').on("change", "#cameraInput", readCode);
    function readCode() {
        // var cnvs=document.getElementById("cnvsForFormat");
        var input = document.getElementById('cameraInput').files[0];
        if (input) {
            var img = new Image();
            var reader = new FileReader();
            reader.onload = function (e) {
                img.onload = function() {
                    var count=0;
                    while (img.width<1) {
                        count++;
                    }
                    var newHeight = img.height;
                    var newWidth = img.width;
                    while (newWidth>600 || newHeight>600) {
                        newHeight = newHeight/2;
                        newWidth = newWidth/2;
                    }
                    var renderImg = new Image();
                    var mpImg = new MegaPixImage(img);
                    mpImg.render(renderImg, { width: newWidth, height: newHeight });
                    $.post("?cmd=ajax&param=qr_verarbeiten",{photo:renderImg.src},function(e) {
                        alert(e);
                    });
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(input);
        }
    };
});