保存 base 64 图像会在 PHP 中创建一个空白图像答案

【问题标题】：Saving a base 64 image creates a blank image in PHP保存 base 64 图像会在 PHP 中创建一个空白图像
【发布时间】：2017-03-01 16:30:23
【问题描述】：

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

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

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

【问题讨论】：

你是什么意思，“空白图像”？你得到一个 400x600 的图片都是相同的颜色？或者你有一个 0 字节的文件？

标签： php ajax image canvas todataurl

【解决方案1】：

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

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

【讨论】：

【解决方案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);
        }

    })

【讨论】：