保存64进制图像将在PHP中创建一个空白图像 - Saving a base 64 image creates a blank image in PHP

Saving a base 64 image creates a blank image in 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);
        })

下面是我的php代码:

$imageArr = explode(',', $_POST['image']);
$image = base64_decode($imageArr[1]);
file_put_contents('image.jpg',$image);

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

当我保存图像时，它会在我的服务器上创建一个空白图像。但是当我保存另一个图像而不刷新页面时，它会保存以前的图像在它的位置，这次是正确的。这是我无法理解的，有人能告诉我吗?

在加载图像之前发送图像。你的img。在http.send(data)之后执行Onload函数。当你再次上传时，它会得到之前已经加载的图像。

试试以下:

$("#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);
        }
    })

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

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