将服务器上的画布从 angularjs 保存到 php答案

【问题标题】：Save canvas on server from angularjs to php将服务器上的画布从 angularjs 保存到 php
【发布时间】：2015-12-14 02:57:12
【问题描述】：

HTML：一张图片 (jpg) 和一张画布。设置为适当的尺寸。不显示

<img src="images/facebook.jpg" id="facebook-image" style="display: none;"/>
<canvas width="2000" height="1047" id="canvas" style="display: none;" ></canvas>

AngularJS：在画布中绘制图像并向画布添加文本。 POST 到 php 文件

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("facebook-image");
context.drawImage(image,0,0);
context.fillText('Hello world', 1300, 580);
var dataURL = canvas.toDataURL("image/png");

var config = {
    method : 'POST',
    url: 'save-image.php',
    headers : {
        'Content-Type' : 'application/upload'
    },
    data: { image: dataURL }
};

$http(config)
    .then(function result(res){
       //Goes in here and 
    }, function error(er){

    });

PHP：删除 'data:image/png;base64,'，将空格替换为 '+'，保存

<?php

$img = $_POST['image'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$file = "images/image_name.png";
$success = file_put_contents($file, $img);
echo "ok";
?>

错误：
文件保存在服务器上，但它是空的

可能的问题：
- 图片：Mime 类型为 jpg，另存为 png 画布，另存为 png 文件。
- 图片：不显示在 html
- AngularJS 配置：标题！？
- php : 删除数据:image/png;base64,
- php：用+号替换空格

【问题讨论】：

1.) 为什么要将 $data 传递给 file_put_contents？不应该是 $img 吗？ 2.) 试试这个 $img = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $img));而不是 str_replace 行
我先修复，然后尝试第二次，但没有成功
文件是空的还是图片是黑白的？
文件为空。还是没有成功...
可能是因为base64的大小太大了？这是唯一的可能性，但是当您在 php 中回显您的 $img 时，问题是 file_put_contents？对吗？

标签： php angularjs canvas

【解决方案1】：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("facebook-image");
context.drawImage(image,0,0);
context.fillText('Hello world', 1300, 580);
var dataURL = canvas.toDataURL("image/png");

var config = {
    method : 'POST',
    url: 'save-image.php',
    data: { image: dataURL }
};

$http(config)
    .then(function result(res){
       //Goes in here and 
    }, function error(er){

    });

php

<?php
$postdata = file_get_contents("php://input");

$request = json_decode($postdata);
$img = $request->image;
$name = $request->name;
$img = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $img)); 
$file = "images/fb/my-file.png";
$success = file_put_contents($file, $img);
echo $success;
?>

【讨论】：