Question

首先，这是我的客户端代码：

big_table

这是我的PHP代码：

$("#fileToUpload").on("change", function(){
            var filesToUpload = document.getElementById("fileToUpload");
            var file = filesToUpload.files[0];
            var img = new Image(600,400);
            var reader = new FileReader();
            reader.onload = function(e){
                img.src = e.target.result;
            }
            reader.readAsDataURL(file);

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');
            img.onload = function(){

                canvas.width = 600;
                canvas.height = 400;

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

            var dataURL = canvas.toDataURL("image/jpg");

                var data = new FormData();
                data.append("image", dataURL);

                var xhttp = new XMLHttpRequest;
                xhttp.open("POST", "test.php", true);

                xhttp.send(data);

        })

我在客户端调整图像大小，然后将其作为数据URL发送到php，然后保存为图像。

当我保存图像时，它会在我的服务器上创建一个空白图像。但是当我保存另一张图像而不刷新页面时，它会将之前的图像保存在其中，这次正确。这超出了我的意见，有人可以解释一下吗？

Answer 1

您在加载图像之前发送图像。你的img.onload函数在xhttp.send（data）之后执行。当您再次上传时，它会获取已加载的上一张图像。

请尝试以下操作：

$("#fileToUpload").on("change", function(){
        var filesToUpload = document.getElementById("fileToUpload");
        var file = filesToUpload.files[0];
        var img = new Image(600,400);
        var reader = new FileReader();
        reader.onload = function(e){
            img.src = e.target.result;
        }
        reader.readAsDataURL(file);

        var canvas = document.getElementById("canvas");
        canvas.width = 600;
        canvas.height = 400;
        var ctx = canvas.getContext('2d');

        img.onload = function(){

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

            var dataURL = canvas.toDataURL("image/jpg");

            var data = new FormData();
            data.append("image", dataURL);

            var xhttp = new XMLHttpRequest;
            xhttp.open("POST", "test.php", true);

            xhttp.send(data);
        }

    })

Answer 2

有可能要记住：由于客户端的所有内容都是在文件输入的onChange事件处理程序中设置的，可能是某些设置代码以错误的顺序启动和/或没有及时按预期使用？然后，当再次调用onChange事件时，资源已经到位/已经初始化并且图像按预期显示。

这只是一个理论。要进行调查，请尝试将初始化移出事件处理程序范围。

保存基础64图像会在PHP中创建一个空白图像

2 个答案: