PHP canvas 图片上传到远程服务器

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

请帮帮我，我已经尝试了很多方法来挽救，但我还是失败了。

Answer 1

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

在浏览器中，您收到base64编码的图片内容
然后将该内容以纯文本形式传递到本地服务器后。
在本地服务器上，您不执行任何操作，只是通过 CURL 以 RAW 格式传递数据。
您终于可以将图像存储在删除服务器上了。

希望对您有所帮助！

在客户端：

$(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;

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

PHP canvas 图片上传到远程服务器

PHP canvas image upload to remote server

javascript

php

upload

jquery

canvas