使用AJAX发送图像数据并存储在服务器上

时间:2016-01-20 00:57:19

标签: php ajax html5 canvas

PHP没有从ajax接收数据,我正在尝试使用canvas HTML5创建图像并使用PHP将其存储在我的服务器上,但是当我这样做时,我没有收到任何内容。

image.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='bookmark' class='button'>
  <span id='text'>Text</span>
</div>

我也有Script.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<canvas width="800" height="420" id="canvas"></canvas>
<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img  = loadImage('images/quizes/sim.png' ,main);
var img1 = loadImage('images/users/alfred.jpg', main);
var img2 = loadImage('images/users/brynjar.jpg', main);


var imagesLoaded = 0;
function main() {
    imagesLoaded += 1;

    if(imagesLoaded == 3) {

        ctx.drawImage(img, 0, 0, 800, 420);

        ctx.drawImage(img1, 0, 0, 320, 320);

        ctx.drawImage(img2, 480, 0, 320, 320);

    }
}

function loadImage(src, onload) {
    var img = new Image();

    img.onload = onload;
    img.src = src;

    return img;
}

var dataURL = canvas.toDataURL();

alert(dataURL);

$.ajax({
    type: "POST",
    url: "script.php",
    data: {
        imgBase64: dataURL
    }
}).done(function(o) {
    console.log('saved');
    // If you want the file to be visible in the browser
    // - please modify the callback in javascript. All you
    // need is to return the url to the file, you just saved
    // and than put the image in your browser.
});
</script>

但是当我运行image.php时,$ _post [&#39;数据&#39;]并没有获取任何数据。

1 个答案:

答案 0 :(得分:0)

您应该从$_POST['imgBase64']变量中读取数据。