PHP canvas圖像上傳到遠程服務器

Question

我正在嘗試將畫布圖像（使用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代碼生成了elemnt圖像。

//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);
?>

請幫助我，我已經嘗試了很多方法來保存，但我沒有做到。

Answer 1

這是你的AJAX代碼。 您應該直接將從canvas接收的圖像數據傳遞給服務器。

1. 在瀏覽器中，您將收到base64編碼的圖像內容

2. 然后以純文本格式將該內容傳遞到本地服務器。

3. 在本地服務器上，您不執行任何操作，只需以RAW格式通過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();
                   }
               });
            }
        });
    });
});

在本地服務器上（uploaded.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;

Answer 2

如果你想簡化那么1.刪除upload.php 2.用下面的代碼替換uploaded.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);
?>