保存 base 64 图像会在 PHP 中创建空白图像

Question

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

$("#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，然后保存为图像。

当我保存图像时，它会在我的服务器上创建一个空白图像。但是，当我在不刷新页面的情况下保存另一张图片时，它会将前一张图片保存在原处，而且这次是正确的。这超出了我的范围，有人可以解释一下吗？

Answer 1

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

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

Answer 2

您发送的图片尚未加载。您的 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);
        }

    })

保存 base 64 图像会在 PHP 中创建空白图像

Saving a base 64 image creates a blank image in PHP

php

ajax

image

canvas

todataurl