如何使用php从javascript保存base64图像

有时, 用户将无法选择文件并将其附加到文件输入, 或者你正在使用javascript实现功能, 该功能会生成base64图像(例如, 从用户获取快照并将其保存在服务器中, 以了解更多信息)。关于此功能)。在数据库中保存一个base64字符串, 处理图像很容易拥有文件, 这在性能方面是个坏主意。

可能你已经知道如何将base64映像发送到服务器, 但是一些额外的信息并不会伤害任何人：

通常, 你可以使用简单的表单和文本区域(因为base64图像可能太长), 然后使用javascript将生成的base64保存在texarea上, 并稍后在服务器上检索。

<!-- Note that you need to submit the form (or the ajax) with post method, because the base64 can be too long for use the get method -->


<canvas id="myCanvasImage" width="500" height="500"></canvas>

<form method="POST" name="form" id="form">
  <textarea name="base64" id="base64"></textarea>
  <button type="submit">
    Send image
  </button>
</form>

<script>

   // on the submit event, generate a image from the canvas and save the data in the textarea
   document.getElementById('form').addEventListener("submit", function(){
      var canvas = document.getElementById("myCanvasImage");
      var image = canvas.toDataURL(); // data:image/png....
      document.getElementById('base64').value = image;
   }, false);

</script>

或者, 如果你不想使用表单, 只需使用ajax：

var image = "data:image/png;base64, BBBFBfj42Pj4"; // to create a image read the previous example

$.ajax({
  url:"service/url/process.php",   // send the base64 post parameter
  data:{
    base64: image
  },   // important POST method !
  type:"post",   complete:function(){
    console.log("Ready");
  }
});

使用PHP将base64字符串另存为图像

后端部分确实很容易处理, 你需要弄清楚的唯一部分是如何从请求中检索字符串($ _POST或使用你喜欢的框架检索帖子信息的方式)。

// baseFromJavascript will be the javascript base64 string retrieved of some way (async or post submited)
$baseFromJavascript = "data:image/png;base64, BBBFBfj42Pj4"; // $_POST['base64']; //your data in base64 'data:image/png....';
// We need to remove the "data:image/png;base64, "
$base_to_php = explode(', ', $baseFromJavascript);
// the 2nd item in the base_to_php array contains the content of the image
$data = base64_decode($base_to_php[1]);
// here you can detect if type is png or jpg if you want
$filepath = "/path/to/my-files/image.png"; // or image.jpg

// Save the image in a defined path
file_put_contents($filepath, $data);

注意：你可以使用正则表达式简化前面的代码：

$baseFromJavascript = "data:image/png;base64, BBBFBfj42Pj4";

// remove the part that we don't need from the provided image and decode it
$data = base64_decode(preg_replace('#^data:image/\w+;base64, #i', '', $baseFromJavascript));

$filepath = "/path/to/my-files/image.png"; // or image.jpg

// Save the image in a defined path
file_put_contents($filepath, $data);

如果在将图像保存到服务器时遇到图像上的黑色背景的已知问题, 请记住将其另存为png, 请在此处阅读有关此问题的更多信息, 玩得开心！