在 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() {

    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: "save2.php",

        data: {

            imgBase64: dataURL,

            imgFileName: dataFileName,

            imgFileType: dataFileType

        }

    }).done(function(o) {

        var response = JSON.parse(o);

        $('body').prepend('<img src="vikas2/images/' + response.data[0].fileName + '" style="height: 200px; width: auto;">');

    });

}

2.save2.php

<?php

ini_set('display_errors', 1);

ini_set('display_startup_errors', 1);

error_reporting(E_ALL);

if (isset($_POST['imgBase64']) && isset($_POST['imgFileName']) && isset($_POST['imgFileType'])) {

    $fname   = filter_input(INPUT_POST, 'imgFileName'); // THE FILENAME THE USER CHOSE IS RECEIVED VIA POST

    $img     = filter_input(INPUT_POST, 'imgBase64'); // THE BASE64 ENCODING RECEIVED VIA POST

    $imgtype = filter_input(INPUT_POST, 'imgFileType'); // THE FILE TYPE / EXTENSION IS RECEIVED VIA POST   

    if ($imgtype === 'png') {

        $img = str_replace('data:image/png;base64,', '', $img);

    };

    if ($imgtype === 'jpg') {

        $img = str_replace('data:image/png;base64,', '', $img);

    };

    $imgtype = "png";

    $fn_array = explode(".",$fname);    

    unset($fn_array[count($fn_array)-1]);

    $fileName = join($fn_array).".".$imgtype;

    // REPLACE ALL SPACES IN THE IMAGE DATA WITH PLUS SYMBOL

    $img = str_replace(' ', '+', $img);

    // CONVERT THE DATA FROM BASE64 ENCODING

    $img = base64_decode($img);

    // SAVE THE FILE WITH NAME SYNTAX :

    file_put_contents('vikas2/images/' . $fileName, $img);

    echo '{"error":false, "message":null,"data":[{"msg": "Image has been saved successfully!", "fileName": "' . $fileName . '"}]}';

}

?>

它正在保存用户上传的图像

请试试这个