Question

我的目标：

如果点击了我网站上的相机按钮＆gt;打开智能手机相机＆gt;从qr-code拍摄照片＆gt;用js＆gt;调整大小将图片加载到我的服务器上＆gt;阅读qr-code＆gt;从qr-code返回给我的值。

我的问题是我的代码生成了一个空图像文件（jpg）并给了我一个错误。

我通过上传现有的qr-code图像对其进行了测试，并在第二次尝试上传时进行了测试。在第一次尝试时，我得到了相同的错误，就像我尝试从智能手机上传拍摄的照片一样。

我的HTML

<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 Libraray来处理我从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);
        }
    };
});

Answer 1

我明白了。这是因为浏览器加载了img.src异步。所以我必须在加载img.src之前添加一个img.onload函数，以确保img已经呈现。 ; - ）

我已将工作代码添加到我的问题中。

为什么要生成画布渲染空图像文件？

1 个答案: