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

PHP canvas image upload to remote server

本文关键字：服务器 布图像 图像 PHP      更新时间：2023-09-26

我正在尝试将画布图像（使用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图像。

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

服务器端处理程序脚本ie.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);
?>

请帮帮我，我已经尝试了很多方法来保存，但我都没能做到。

以下是AJAX的代码。您应该直接将从canvas接收到的图像数据传递到服务器。

  1. 在浏览器中，您将收到base64编码的图像内容

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

  3. 在本地服务器上，您不执行任何操作，只需通过CURL以RAW格式传递数据
  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();
                   }
               });
            }
        });
    });
});


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

如果你想让它变得简单，那么1.删除upload.php2.将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);
?>
相关文章：