Javascript 将上载的图像保存在画布中到服务器

我们正在从json获取掩码图像并显示在页面中。一旦我们点击蒙版，我们将显示文件上传对话框，以便用户上传图像

要求：

function test(){
var canvas  = document.getElementById("cvs");
var dataURL = canvas.toDataURL();

$.ajax({
  type: "POST",
  url: "upload.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 

});

}

<?php    
define('UPLOAD_DIR', 'uploads/');
imgBase64 = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?> 

一旦用户单击“保存”按钮，我想将该图像上传到服务器。。。。但现在它没有在服务器中保存映像

代码笔：

脚本：

function test(){
var canvas  = document.getElementById("cvs");
var dataURL = canvas.toDataURL();

$.ajax({
  type: "POST",
  url: "upload.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 

});

}

<?php    
define('UPLOAD_DIR', 'uploads/');
imgBase64 = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?> 

Upload.php：

function test(){
var canvas  = document.getElementById("cvs");
var dataURL = canvas.toDataURL();

$.ajax({
  type: "POST",
  url: "upload.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 

});

}

<?php    
define('UPLOAD_DIR', 'uploads/');
imgBase64 = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?> 

将图像保存到服务器

主要问题是这里需要一些服务器端语言。。。当然，您可以（ajax）发布base64，但是服务器上的某些东西必须知道如何处理它接收的POST（ed）数据

下面是我在上一个项目中使用的PHP（服务器端代码），它允许用户上传自己的化身图像

在我的用例中，我让ajax POST发送了3件事情：

用户图像文件名

用户图像文件扩展名（png、jpg或gif）

原始base64编码数据

PHP应该是相当不言自明的，但是如果您有任何问题，请告诉我

您可能需要确保正在写入图像的文件夹上的权限实际上允许PHP进程进行写入。有时我不得不调整文件夹权限，这取决于主机平台的配置

如果它不起作用，您可以将PHP错误设置为ON，这样它就会详细地回答PHP遇到的问题。（快速的谷歌搜索应该会有所帮助）

您可以使用一个已知的文件类型和文件名简化我的示例代码，以进行快速测试。如果您需要帮助，我可以通过电子邮件与您联系，以获取详细信息和帮助。（我记得当我处理这件事的时候，我是多么渴望让它发挥作用——我感觉到了你的痛苦！！！）

已更新工作解决方案的PHP源代码：

if( isset($_POST['imgBase64']) && isset($_POST['imgFileName']) && 
isset($_POST['imgFileType']) ){

    $fname = filter_input(INPUT_POST, 'imgFileName'); // THE FILENAME THE USER CHOSE IS RECEIVED VIA POST
    $img = filter_input(INPUT_POST, 'imgBase64');  // THE BASE64 ENCODING RECEIVED VIA POST
    $imgtype = filter_input(INPUT_POST, 'imgFileType');  // THE FILE TYPE / EXTENSION IS RECEIVED VIA POST

    // STRIP OFF THE BEGINNING OF THE BASE64 DATA, BUT DEPENDS ON THE IMAGE TYPE.  
    // I COULD HAVE SIMPLIFIED THIS BUT USED IF STATEMENTS.
    if ( $imgtype === 'png'){
        $img = str_replace('data:image/png;base64,', '', $img);
    };
    if ( $imgtype === 'jpg' || $imgtype === 'jpeg'){
        $img = str_replace('data:image/jpeg;base64,', '', $img);
    };
    if ( $imgtype === 'gif'){
        $img = str_replace('data:image/gif;base64,', '', $img);
    };

    // REPLACE ALL SPACES IN THE IMAGE DATA WITH PLUS SYMBOL
    $img = str_replace(' ', '+', $img); 
    // CONVERT THE DATA FROM BASE64 ENCODING
    $img = base64_decode($img); 

    // SAVE THE FILE 
    file_put_contents('...path.../'.$fname, $img);


    echo '{"error":false, "message":"Image has been saved successfully!","data":[{"fileName": "'.$fname.'"}]}';
}

---

主要问题是这里需要一些服务器端语言。。。当然，您可以（ajax）发布base64，但是服务器上的某些东西必须知道如何处理它接收的POST（ed）数据

下面是我在上一个项目中使用的PHP（服务器端代码），它允许用户上传自己的化身图像

在我的用例中，我让ajax POST发送了3件事情：

用户图像文件名

用户图像文件扩展名（png、jpg或gif）

原始base64编码数据

PHP应该是相当不言自明的，但是如果您有任何问题，请告诉我

您可能需要确保正在写入图像的文件夹上的权限实际上允许PHP进程进行写入。有时我不得不调整文件夹权限，这取决于主机平台的配置

如果它不起作用，您可以将PHP错误设置为ON，这样它就会详细地回答PHP遇到的问题。（快速的谷歌搜索应该会有所帮助）

您可以使用一个已知的文件类型和文件名简化我的示例代码，以进行快速测试。如果您需要帮助，我可以通过电子邮件与您联系，以获取详细信息和帮助。（我记得当我处理这件事的时候，我是多么渴望让它发挥作用——我感觉到了你的痛苦！！！）

已更新工作解决方案的PHP源代码：

if( isset($_POST['imgBase64']) && isset($_POST['imgFileName']) && 
isset($_POST['imgFileType']) ){

    $fname = filter_input(INPUT_POST, 'imgFileName'); // THE FILENAME THE USER CHOSE IS RECEIVED VIA POST
    $img = filter_input(INPUT_POST, 'imgBase64');  // THE BASE64 ENCODING RECEIVED VIA POST
    $imgtype = filter_input(INPUT_POST, 'imgFileType');  // THE FILE TYPE / EXTENSION IS RECEIVED VIA POST

    // STRIP OFF THE BEGINNING OF THE BASE64 DATA, BUT DEPENDS ON THE IMAGE TYPE.  
    // I COULD HAVE SIMPLIFIED THIS BUT USED IF STATEMENTS.
    if ( $imgtype === 'png'){
        $img = str_replace('data:image/png;base64,', '', $img);
    };
    if ( $imgtype === 'jpg' || $imgtype === 'jpeg'){
        $img = str_replace('data:image/jpeg;base64,', '', $img);
    };
    if ( $imgtype === 'gif'){
        $img = str_replace('data:image/gif;base64,', '', $img);
    };

    // REPLACE ALL SPACES IN THE IMAGE DATA WITH PLUS SYMBOL
    $img = str_replace(' ', '+', $img); 
    // CONVERT THE DATA FROM BASE64 ENCODING
    $img = base64_decode($img); 

    // SAVE THE FILE 
    file_put_contents('...path.../'.$fname, $img);


    echo '{"error":false, "message":"Image has been saved successfully!","data":[{"fileName": "'.$fname.'"}]}';
}

---

我第一眼看到的一个问题是在您的.php文件中。。。imgBase64应该是$imgBase64。。。我注意到，在底层php代码中，您似乎没有在任何地方使用该变量。在这种情况下，对于PHP服务器端代码，我经常会检查我试图使用的所有“部件”，以确保它们都正常工作并就位——将每个部件都返回检查，然后我一步一步地返回逻辑。@tamak感谢您的建议，不使用PHP是否可以在服务器中保存上传的图像？我们可以只使用html5、js或jquery吗？@VickeyColor不，javascript和html不是服务器端语言。您需要一种服务器端语言才能发布到服务器。@vickeycolors-我有一个一两年前创建的工作示例-今天晚些时候我将尝试将其挖掘出来，向您展示基本知识，并为您提供一个指向github repo的链接。我第一眼看到的一个问题是在您的.php文件中。。。imgBase64应该是$imgBase64。。。我注意到，在底层php代码中，您似乎没有在任何地方使用该变量。在这种情况下，对于PHP服务器端代码，我经常会检查我试图使用的所有“部件”，以确保它们都正常工作并就位——将每个部件都返回检查，然后我一步一步地返回逻辑。@tamak感谢您的建议，不使用PHP是否可以在服务器中保存上传的图像？我们可以只使用html5、js或jquery吗？@VickeyColor不，javascript和html不是服务器端语言。您需要一种服务器端语言才能发布到服务器。@vickeycolors-我有一个一两年前创建的工作示例-今天晚些时候我会尝试将其挖掘出来，向您展示基本知识，并为您提供一个指向github repo的链接。谢谢，最初我用示例html代码尝试了您的代码，但图像没有上载到服务器，此外，即使我已经在php中添加了错误报告代码，我也没有收到任何错误…谢谢，您的代码运行良好，我可以在服务器中保存图像，但保存的图像不显示，请帮助我：@VickeyColor-我刚刚更新了上面的源代码答案。我已经确认它可以在你的服务器上运行，并向你发送了一封电子邮件。您好，它将上载的图像与掩码图像一起保存，但我们需要的是只保存上载的图像，请帮助我，因为…谢谢，最初我用示例html代码尝试了您的代码，但图像没有上载到服务器，此外，即使我已经在php中添加了错误报告代码，我也没有收到任何错误…谢谢，您的代码运行良好，我可以在服务器中保存图像，但保存的图像不显示，请帮助我：@VickeyColor-我刚刚更新了上面的源代码答案。我得了c