在 document.getElementById 而不是画布中传递上传的图像

Question

我们通过获取 json 来显示框图像和蒙版图像。

用户将点击蒙版图片并上传他们自己的图片。

问题：

单击保存按钮，面具图像和用户上传的图像都保存在服务器中，如下所示....

要求：

但是 Onclick Save 按钮，我只需要在服务器上保存用户上传的图像。

以下是用户上传的图片：

html

<button class ="save" onclick="test()">Save image to server</button>

脚本

function test() {

    var canvas = document.getElementById("1");

    var dataURL = canvas.toDataURL(); // THE BASE 64 DATA

    var dataFileName = document.getElementById('fileup').value.replace(/.*(\/|\\)/, ''); // GET THE FILE NAME THAT USER CHOSE

    var dataFileType = dataFileName.split('.').pop();

    $.ajax({

        type: "POST",

        url: "save.php",

        data: {

            imgBase64: dataURL,

            imgFileName: dataFileName,

            imgFileType: dataFileType

        }

    }).done(function(o, imgFileName) {

        console.log(o);

        var response = JSON.parse(o);

        console.log(response);

        $('body').prepend('<img src="' + dataFileName + '" style="height: 200px; width: auto;">');

    });

}    

Answer 1

您的问题是您上传画布而不是用户图像：var canvas = document.getElementById("1");var dataURL = canvas.toDataURL(); // THE BASE 64 DATA但是您必须在文件输入元素中上传所选图像。这里展示了如何从文件输入元素读取数据。

Answer 2

我更新了这两个文件1. text() - javascript 函数function test() {&nbsp; &nbsp; var canvas = document.getElementById("1");&nbsp; &nbsp; var dataURL = canvas.toDataURL(); // THE BASE 64 DATA&nbsp; &nbsp; var dataFileName = document.getElementById('fileup').value.replace(/.*(\/|\\)/, ''); // GET THE FILE NAME THAT USER CHOSE&nbsp; &nbsp; var dataFileType = dataFileName.split('.').pop();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; url: "save2.php",&nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imgBase64: dataURL,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imgFileName: dataFileName,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imgFileType: dataFileType&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }).done(function(o) {&nbsp; &nbsp; &nbsp; &nbsp; var response = JSON.parse(o);&nbsp; &nbsp; &nbsp; &nbsp; $('body').prepend('<img src="vikas2/images/' + response.data[0].fileName + '" style="height: 200px; width: auto;">');&nbsp; &nbsp; });}2.save2.php<?phpini_set('display_errors', 1);ini_set('display_startup_errors', 1);error_reporting(E_ALL);if (isset($_POST['imgBase64']) && isset($_POST['imgFileName']) && isset($_POST['imgFileType'])) {&nbsp; &nbsp; $fname&nbsp; &nbsp;= filter_input(INPUT_POST, 'imgFileName'); // THE FILENAME THE USER CHOSE IS RECEIVED VIA POST&nbsp; &nbsp; $img&nbsp; &nbsp; &nbsp;= filter_input(INPUT_POST, 'imgBase64'); // THE BASE64 ENCODING RECEIVED VIA POST&nbsp; &nbsp; $imgtype = filter_input(INPUT_POST, 'imgFileType'); // THE FILE TYPE / EXTENSION IS RECEIVED VIA POST&nbsp; &nbsp;&nbsp; &nbsp; if ($imgtype === 'png') {&nbsp; &nbsp; &nbsp; &nbsp; $img = str_replace('data:image/png;base64,', '', $img);&nbsp; &nbsp; };&nbsp; &nbsp; if ($imgtype === 'jpg') {&nbsp; &nbsp; &nbsp; &nbsp; $img = str_replace('data:image/png;base64,', '', $img);&nbsp; &nbsp; };&nbsp; &nbsp; $imgtype = "png";&nbsp; &nbsp; $fn_array = explode(".",$fname);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; unset($fn_array[count($fn_array)-1]);&nbsp; &nbsp; $fileName = join($fn_array).".".$imgtype;&nbsp; &nbsp; // REPLACE ALL SPACES IN THE IMAGE DATA WITH PLUS SYMBOL&nbsp; &nbsp; $img = str_replace(' ', '+', $img);&nbsp; &nbsp; // CONVERT THE DATA FROM BASE64 ENCODING&nbsp; &nbsp; $img = base64_decode($img);&nbsp; &nbsp; // SAVE THE FILE WITH NAME SYNTAX :&nbsp; &nbsp; file_put_contents('vikas2/images/' . $fileName, $img);&nbsp; &nbsp; echo '{"error":false, "message":null,"data":[{"msg": "Image has been saved successfully!", "fileName": "' . $fileName . '"}]}';}?>它正在保存用户上传的图像请试试这个