为什么要生成渲染空图像文件的画布？ [复制]答案

【问题标题】：Why produce the canvas rendering an empty image file? [duplicate]为什么要生成渲染空图像文件的画布？ [复制]
【发布时间】：2015-08-13 22:28:00
【问题描述】：

我的目标：

如果点击我网站上的相机按钮 > 打开智能手机相机 > 从二维码拍照 > 使用 js 调整大小 > 在我的服务器上加载图片 > 读取二维码 > 给我来自的值返回二维码。

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

我通过上传现有的二维码图像对其进行了测试，并且在第二次尝试上传时它可以正常工作。在第一次尝试时，我遇到了同样的错误，就像我尝试从智能手机上传拍摄的照片一样。

我的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 读取二维码

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);
        }
    };
});

【问题讨论】：

标签： javascript php jquery html image

【解决方案1】：

我明白了。这是导致浏览器加载 img.src 异步。所以我必须在加载 img.src 之前添加一个 img.onload 函数，以确保 img 已经渲染。 ;-)

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

【讨论】：