将PHP画布图像上传到远程服务器

Question

我正在尝试将一个canvas图像（使用html2canvas）上传到远程服务器，文件名已经创建，但大小为0字节。

$(function click1() { 
    $("#share").click(function() { 
    $("#load").show();
        html2canvas($("#backdrop1"), {
            onrendered: function(canvas) {
               var data1 = canvas.toDataURL('image/png');
     //display 64bit image
     var image = new Image();
    image.src = data1;
    $.ajax({
                        url: 'uploading.php',
                        type: 'post',
                        data: {img_val: data1},
                        datatype: 'html',
                        success: function fbs_click1() {
    $("#load").hide();
}
                    });
            }
        });
    });
});

以上Jquery代码生成图像元素。

// Uploading.php

<?php
 $imaged = $_POST['img_val'];
 $filename  = $_FILES[$imaged]['tmp_name'];
 $handle    = fopen($filename, "r");
 $data      = fread($handle,filesize($filename));
 $POST_DATA = array(
   'img_value' => base64_encode($data)
 );
 $curl = curl_init();
 curl_setopt($curl, CURLOPT_URL, 'http://example.com/upload.php');
 curl_setopt($curl, CURLOPT_TIMEOUT, 30);
 curl_setopt($curl, CURLOPT_POST, 1);
 curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($curl, CURLOPT_POSTFIELDS, $POST_DATA);
 $response = curl_exec($curl);
 curl_close ($curl);
?>

服务器端处理脚本即upload.php。

<?php
    $img = $_REQUEST['img_value'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = 'test.png';
    $success = file_put_contents($file, $data);
?>

请帮我，我已经尝试了很多方法来保存，但都失败了。

- Cipher

---

你有两台服务器吗？我的意思是处理 AJAX 请求和存储图像？ - Parixit

@Parixit 我正在尝试将本地服务器上的图像保存到远程服务器。 - Cipher

尝试移除 "datatype: 'html'" - Nishan Senevirathna

Answer 1

这里是关于你的 AJAX 的代码。你应该直接将从 canvas 接收到的图像数据传递给服务器。

1. 在浏览器中，你会收到 base64 编码的图像内容。

2. 然后，你将以纯文本形式将该内容传递到本地服务器。

3. 在本地服务器上，你不需要执行任何操作，只需通过 CURL 以原始格式传递数据。
4. 最后，你可以将图像存储在远程服务器上。

希望这能帮到你！

客户端：

$(function click1() { 
    $("#share").click(function() { 
    $("#load").show();
        html2canvas($("#backdrop1"), {
            onrendered: function(canvas) {
               var data1 = canvas.toDataURL("image/png");
               //display 64bit image
               var image = new Image();
               image.src = data1;
               $.ajax({
                   url: 'uploading.php',
                   type: 'post',
                   data: data1,
                   dataType: 'text',
                   contentType: "application/upload",
                   success: function fbs_click1() {
                      $("#load").hide();
                   }
               });
            }
        });
    });
});

在您的本地服务器上（uploading.php）：

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
   $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];

   $curl = curl_init();    
   curl_setopt($curl, CURLOPT_URL, "http://example.com/upload.php" );
   curl_setopt($curl, CURLOPT_TIMEOUT, 30);
   curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1 );
   curl_setopt($curl, CURLOPT_POST,           1 );
   curl_setopt($curl, CURLOPT_POSTFIELDS, $imageData);
   curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: text/plain')); 
   $result=curl_exec ($curl);
   echo $result;
   curl_close ($curl);
?>

在您的远程服务器上（upload.php）：

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
    $filteredData=substr($imageData, strpos($imageData, ",")+1);
    $unencodedData=base64_decode($filteredData);

    $upload_dir = "PATH_TO_UPLOAD_DIRECTORY/";
    $final_img = $upload_dir."my_upload_image.png";

    if(file_put_contents($final_img, $unencodedData)) {
        echo "SUCCESS";
    }
    else {
        echo 'ERROR';
    }
}
else
{
    echo "ERROR";
}
exit;

- Parixit

---

@Cipher 你之前是把 canvas 的内容封装为“键/值”对的形式传输到服务器，这种方式是错误的。应该直接以纯文本格式发送。 - Parixit

抱歉，我的错。非常感谢。 - Cipher

我应该如何传递两个变量？我不熟悉“HTTP_RAW_POST_DATA”方法，请帮忙。 - Cipher

@Cipher 你无法轻松地传递多个变量。因为它只能作为一个字符串传递。所以你必须自己管理多个变量，比如添加“分隔符”和“值”。相反，你可以在GET/query string中传递更多的变量。 - Parixit

我只需要添加一个 文件名(ID)，这样我就可以从URL访问它了，有没有办法将文件ID传递给远程服务器？ - Cipher

Answer 2

如果你想简化它，那么 1. 删除 upload.php 2. 用下面的代码替换 uploading.php。

<?php
 $img = str_replace('data:image/png;base64,', '', $_POST['img_val']);
 $img = str_replace(' ', '+', $img);
 $data = base64_decode($img);
 $file = 'test.png';
 $success = file_put_contents($file, $data);
?>

- Parth Patel