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

有时, 用户将无法选择文件并将其附加到文件输入, 或者你正在使用javascript实现功能, 该功能会生成base64图像(例如, 从用户获取快照并将其保存在服务器中, 以了解更多信息)。关于此功能)。在数据库中保存一个base64字符串, 处理图像很容易拥有文件, 这在性能方面是个坏主意。
【如何使用php从javascript保存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 = http://www.srcmini.com/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 = http://www.srcmini.com/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 pathfile_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 = http://www.srcmini.com/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 pathfile_put_contents($filepath, $data);

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