Question

我有一个使用Javascript获得的图像的base64字符串，然后将其发送到PHP脚本。

这有效，我也可以在脚本中回显字符串，但是现在我试图从中创建图像并将其保存在服务器上。但是我没有收到任何错误，但也没有保存任何内容。

我在做什么错了？

这是我创建字符串的方式：

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var imageType = /image.*/;

        if (file.type.match(imageType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerHTML = "";

                var img = new Image();
                img.src = reader.result;

                fileDisplayArea.appendChild(img);
            }

            reader.readAsDataURL(file);
        } else {
            fileDisplayArea.innerHTML = "File not supported!"
        }
    });
}

然后将base64字符串添加到我得到的<img src中，并使用ajax发布：

// Add/edit companies script
$( "#companywrap" ).on("click", "#savecompany", function( event ) {
  // Stop normal form behaviour
  event.preventDefault();
  var $form = $("#companyform"),
  $logo = $form.find( "#fileDisplayArea" ).children('img').attr('src');
  url = $form.attr( "action" );

  var posting = $.post( url, {
    logo: $logo,
  });
  // Show result in a div
  posting.done(function( data ) {
    $( ".resultmessage" ).empty().slideDown('fast').append( data );
    console.log($logo);
  });
});

然后在我的PHP脚本中执行以下操作：

$logo = $_POST['logo'];

$imageData = base64_decode($logo);
$source = imagecreatefromstring($imageData);
$angle = 90;
$rotate = imagerotate($source, $angle, 0);
$imageName = "myfolder/testfile.png";
$imageSave = imagejpeg($rotate,$imageName,100);
imagedestroy($source);

但这没什么用。

这是我回显$logo时得到的字符串（由于太长，我不会发布全部内容）：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaAAAAGcCAYAAACfjnSPAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAgABJREFUeNrs/QV4XFt65Y07Mx/MJP+Zb2YCnXR3unO7L/qamZmZmWVbFoPFzMwlKJVYKjEzmEmyJVtmZmZm+941//XuU/K96UkynXTSSXrk51ne55w6ReeU3t9ee7977x7v3r3r8W9BL1++6vHxw3c9Xr163ePhg8c9rl+92ePqtRs97t9/2OP+vQc9AKjzPn782OP1m7c9Xr141ePtm3c9nj553uP585c9nj97oZ4n58nryHlSvnz5usezZ897vOFzRC/4vCfyHB579fpNj5fcf/7spXqNZyJuv3jOY0ov1WNPnrzo8fjxc/XaP9aHD9/3+Pjdx0/733333Se9e/eR+k7p7Vv5fm/V5//w4aPS+3cfuC96/yPxWrzV9Pb1ux6v+BxNr/k5X/d48/qt0uvXcoyfXfRCe0w+80tKvp9IPv9TSr67XKPf/Ox/aPqO9/rDhw//y3342/pe04eP/6T3kNcXfTRJ7uNH0ccPJvHeyu9O6bt/4HP8pj7+9ud+r32H3+ozf2+SXJPvv//Rse8/vV7X/jt+HzlHfofynbqe16W7d27zd/bC9N1+0O/r/v7P//k/u/UHqB7dAOoGUDeAugHUDaBudQPo/2AAvX//gWL5TlM3gLoB1A2gbgB1A6gbQP9sABLAdAHow3tCSOnDj9QNoG4AdQOoG0DdAOoG0O8IoPfvv/s3A6BnT190A6gbQN0A6lY3gLoB1A2gbgB1A6gbQN3qBlA3gLoB1A2gbgB1qxtAv08APWVA7gZQN4C6AdQNoG51A6gbQH8PgF6/6tKbbgB1A6gbQN3qBtC/ZQA9evjk/xgAvX7Fa0D9IwD0n/+QRQD9Z8Lhf3D7Z7z+f4++F/2EAPqnvMcfdQPonwVAf9QNoG51A+ifBqA//rEIoD8mgP6S231F/IP+JAKoL+HTT0QA9SOA+hEwyxm0LJTef7R4r/ThR3pvQfgoEUAWhI9JbywIGQ/Cp1T0WvTqbSkBVMrjSvzMpQRQKb+fEj9/KQFUyu9eSgA1sLyt6cVt7t9+yu3nTykp5VjXY89eftJzVb74dPz589d/6zFen9t8X5Z8XLZfvrr94sXr27yX1Ovbr6lXqnx1+/XrN7ffdOnNb6O3Jr25/fatVr55azrGktf09jtuK73WSp7zmI+/ZflJb/ljefuK26/5KqI3b1/I6/Ea/696L+W72+/52h+4/eH9Bx77oEqC5yhVKvpoEu8jS+rjB5M+lhJAqiSASvk7EMVRW/5hfZTS/O+QGTWQ6vNJ33/P8vve/L39178Dkt0OqFvdAPpdAMRA9bsC6P/h6/wxz/ucZV8Gwr4Mrv0Zi6ZTMxmcZxJAMxl4FxBAWwigLQymHnyNUgbRMAbXLQyqBRLA5RgfKyWASgmgbY8fP7v98NHT2w8fPrnNz3j7/v3Ht+/de/Ti7p0HuHP7AW7dvINbN27j9o27LO+o8ubNu7hxXY5LeRvXr99keQvXr1Gyf/UWrl27iWtXTfu/oa7j165q2126fo371+T5t7Xtq6b9rufxPTTJvrYt5Q1+vhv8bPJZbt64oz6nKm/xM99ieZvl7Xu4eesebt/WdOv2fdy+cx93qLt3RQ9w757oIR48eIQHD0169BiPRI+fsHyKx9STp8/w9OlTPHv2DM+fP/+kFy9eKL3s0suX

Answer 1

要获取有效的base64编码字符串，您必须从字符串中删除前缀。在这种情况下，base64字符串在data:image/png;base64,之后开始。

简单的解决方案-只需跳过前22个字符。

$logo = substr($logo, 22);

如果您需要更通用的解决方案-请使用这样的正则表达式

$logo = preg_replace('~^data:[^;]+;base64,~', '', $logo);

Answer 2

要获取图像的特定base 64内容，请删除data:image/png;base64,并用+替换空格，如以下代码所示：

$imageData = base64_decode(str_replace(['data:image/png;base64,', ' '], ['', '+'], $logo));

如何将base64字符串解码为图像并使用PHP将其保存在服务器上

2 个答案: