在保存时将 Canvas 图像文件名和/或位置路径存储到数据库？答案

【问题标题】：Store Canvas image filename and/or location path to database whilst saving?在保存时将 Canvas 图像文件名和/或位置路径存储到数据库？
【发布时间】：2019-02-19 12:26:11
【问题描述】：

我的页面上有一个带有保存按钮的画布图像，用于保存PNG 图像文件。

function save() {
   var canvas = document.getElementById('drawing');
   var dataURL = canvas.toDataURL();
   $.ajax({
   type: "POST", 
   url: "canvas_ajax_upload_post.php", 
      data: { img: dataURL }      
   }).done(function(msg){ 
      alert(msg); 
   });
}

canvas_ajax_upload_post.php 看起来像这样：

<?php
$img = $_POST['img'];
if (strpos($img, 'data:image/png;base64') === 0) {
   $img = str_replace('data:image/png;base64,', '', $img);
   $img = str_replace(' ', '+', $img);
   $data = base64_decode($img);
   $file = 'uploads/img'.date("YmdHis").'.png';
   if (file_put_contents($file, $data)) {
      echo "The canvas was saved as $file.";
   } else {
      echo 'The canvas could not be saved.';
   }   
}
?>

这很好用，图像会保存到我服务器上的上传文件夹中。我一直在尝试做的是将文件名存储在我的 SQL 数据库中。我的主页上有一个隐藏的表单字段，我想在保存图像后将文件名或文件路径传递给它，但我不知道如何。

我尝试在PHP 文件中嵌入JavaScript 代码，但它只是将其视为文本字符串并将其包含在警报弹出窗口中。基本上我想做的是使用JavaScript 代码中的php 文件中的$file 变量。

 E.g. document.getElementById("hidden_form_field").value = $file;

有人可以帮忙吗？

【问题讨论】：

您是否已经有代码来执行 SQL 查询？
您已经发送了data: { img: dataURL } ，所以请设置data: { img: dataURL, filename: fileName }，然后让您的PHP 脚本以各自适当的方式保存它们。另外，在不同的注释：验证该图像，因为我可以向您发送一个以data:image/png;base64<?php letsExploitSomething(); 开头的文件，您的代码或依赖代码，甚至 php 本身，很可能会尝试执行该文件在某一点。从帖子中获取数据，验证它应该是什么（例如，gd 是否同意它是解码后的真实图像？），然后只在安全的情况下写入

标签： javascript php ajax

【解决方案1】：

您可以在数据对象中传递文件名：

function save() {
    var canvas = document.getElementById('drawing');
    var dataURL = canvas.toDataURL();
    $.ajax({
        type: "POST", 
        url: "canvas_ajax_upload_post.php", 
        data: { 
            img: dataURL,
            filename: document.getElementById("hidden_form_field").value
        }      
    }).done(function(msg){ 
        alert(msg); 
    });
}

然后通过获取 $_POST["filename"] 来检索“filename”变量：

<?php
$img =        $_POST['img'];
$filename =   $_POST['filename'];
if (strpos($img, 'data:image/png;base64') === 0) {
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = 'uploads/img'.date("YmdHis").'.png';
    if (file_put_contents($file, $data)) {
        echo "The canvas was saved as $file.";
    } else {
        echo 'The canvas could not be saved.';
    }   
    // DO SOME SQL QUERY W/ $filename variable
    // SQL CODE HERE
}
?>

您需要包含 SQL 查询代码才能使用 $filename 变量。我没有在您的问题中看到该代码。

【讨论】：

【解决方案2】：

根据我从您的问题中了解到的情况，您正试图从 php 中获取 $file back 的值。
您可以通过 $.ajax.done 函数中的 msg 变量（即 php echos）返回该值。
例如：

function(msg){
    alert(msg);
    if(msg.search("The canvas was saved as")!=-1){//was saved
        document.getElementById("hidden_field").value=msg.slice(23);//assuming string "The canvas was saved as $file."
    }
}

【讨论】：

这很好，所有其他答案也一样。谢谢你们。这么多选择:-)