javascript - 使用 dataURL 发送变量

Question

嗨，我有这段代码，可以将 dataURL 发送到 php 并将其保存到服务器。

JS:

function addFormText(){
$('body').append('<input type="hidden" name="img_val" id="img_val" value="" />');
}

function capture() {
$('.Canvas').html2canvas({
    onrendered: function (canvas) {
        //Set hidden field's value to image data (base-64 string)
        $('#img_val').val(canvas.toDataURL("image/png"));
        var myImage = $('#img_val').val();


        $.ajax({

            type:"POST",
            url: "php/save.php",
            data: $('#img_val').val(canvas.toDataURL("image/png")),
            success: function(){
            }
        });
    }
});
}

PHP

//Show the image
echo '<img src="'.$_POST['img_val'].'" />';

//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);
?>

我遇到的问题是发送另一个变量。当我尝试执行此操作时，变量已上传，但 dataURL 以某种方式损坏，文件已保存，但现在为 0B

JS:

            type:"POST",
            url: "php/save.php",
            data: $('#img_val').val(canvas.toDataURL("image/png"))+"&random="+random,
            success: function(){

PHP

<?php
//save.php code

$random = $_REQUEST['random'];

//Show the image
echo '<img src="'.$_POST['img_val'].'" />';

//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents($random.'img.png', $unencodedData);
?>

有人知道为什么吗？

Answer 1

试试这个:

        type:"POST",
        url: "php/save.php",
        data: {
            img_val: canvas.toDataURL("image/png"),
            random: random
        },
        success: function(){

$_POST 包含 img_val 和 random 键