javascript - 使用jquery php回调唯一的文件名

Question

我正在使用 html2canvas 和 Canvas2Image 从 Canvas 创建 png 图像，并使用唯一的文件名将其保存到服务器。

我想知道如何在生成后检索并显示唯一的文件名。

jQuery

$(function() { 
                $("#convertcanvas").click(function() { 
                    html2canvas($("#mycanvas"), {
                      onrendered: function(canvas) {
                       theCanvas = canvas;
                         document.body.appendChild(canvas);

                         // Convert for sharing        

                var img = canvas.toDataURL("image/png",1.0);
                $.ajax({
                    url:'save.php', 
                     type:'POST', 
                     data:{
                          data:img
                        }
                });

PHP

<?php
    $data = $_POST['data'];
    $data = substr($data,strpos($data,",")+1);
    $data = base64_decode($data);
    $file = 'images/myfile'.md5(uniqid()).'.png';
    file_put_contents($file, $data);
?>

预先感谢您的帮助。

Answer 1

您可以通过在 PHP 中返回文件名并使用 succes 方法在 AJAX 中捕获它来获取文件名。

PHP

<?php
    $data = $_POST['data'];
    $data = substr($data,strpos($data,",")+1);
    $data = base64_decode($data);
    $filename = 'myfile'.md5(uniqid()).'.png'; // <-- Added this because you probably don't want to return the image folder.
    $path = 'images/'.$filename;
    file_put_contents($path, $data);
    echo  $filename; // <-- echo your new filename!
?>

jQuery

$.ajax({
    url:'save.php', 
    type:'POST', 
    data:{
        data:img
    },
    success: function(data) {
       alert(data); // <-- here is your filename
       handleData(data); 
    }
});