Javascript 创建波形画布并将其作为png上载到服务器/文件夹

我正在编写一个脚本，该脚本使用canvas将音频转换为波形，然后将其作为png上传到服务器。我用javascript创建了波形，它看起来很棒，我现在只是想弄清楚如何使用toDataUrl（）将画布作为png上传到服务器上；还有阿贾克斯。由于某些原因，它没有上传到服务器

Javascript:

<script>
// AUDIO CONTEXT
window.AudioContext = (window.AudioContext || 
window.webkitAudioContext || 
window.mozAudioContext || 
window.oAudioContext || 
window.msAudioContext);

if (!AudioContext) alert('This site cannot be run in your Browser. Try a recent Chrome or Firefox. ');

var audioContext = new AudioContext();
var currentBuffer  = null;

// CANVAS
var canvasWidth = canvasWidth = 500,  canvasHeight = 50 ;
var newCanvas   = createCanvas (canvasWidth, canvasHeight);
var context     = null;

window.onload = appendCanvas;
function appendCanvas() { document.body.appendChild(newCanvas);
                          context = newCanvas.getContext('2d'); }

// MUSIC LOADER + DECODE
function loadMusic(url) {   
    var req = new XMLHttpRequest();
    req.open( "GET", url, true );
    req.responseType = "arraybuffer";    
    req.onreadystatechange = function (e) {
          if (req.readyState == 4) {
             if(req.status == 200)
                  audioContext.decodeAudioData(req.response, 
                    function(buffer) {
                             currentBuffer = buffer;
                             displayBuffer(buffer);
                    }, onDecodeError);
             else
                  alert('error during the load.Wrong url or cross origin issue');
          }
    } ;
    req.send();
}

function onDecodeError() {  alert('error while decoding your file.');  }

// MUSIC DISPLAY
function displayBuffer(buff /* is an AudioBuffer */) {

  var drawLines = 10000;
   var leftChannel = buff.getChannelData(0); // Float32Array describing left channel     
   var lineOpacity = canvasWidth / leftChannel.length  ;      
   context.save();
   context.fillStyle = '#000' ;
   context.fillRect(0,0,canvasWidth,canvasHeight );
   context.strokeStyle = 'lightgreen';
   context.globalCompositeOperation = 'lighter';
   context.translate(0,canvasHeight / 2);
   context.globalAlpha = 0.1 ;
   context.lineWidth=1;
   var totallength = leftChannel.length;
   var eachBlock = Math.floor(totallength / drawLines);
   var lineGap = (canvasWidth/drawLines);

  context.beginPath();
   for(var i=0;i<=drawLines;i++){
      var audioBuffKey = Math.floor(eachBlock * i);
       var x = i*lineGap;
       var y = leftChannel[audioBuffKey] * canvasHeight / 2;
       context.moveTo( x, y );
       context.lineTo( x, (y*-1) );
   }
   context.stroke();
   context.restore();
}

function createCanvas ( w, h ) {
    var newCanvas = document.createElement('canvas');
    newCanvas.width  = w;     newCanvas.height = h;

};

loadMusic('wavformtest.mp3');   

function uploadtoserver(myCanvas) {
    var photo = myCanvas.toDataURL('image/jpeg');                
    $.ajax({
      method: 'POST',
      url: 'photo_upload.php',
      data: {
        photo: photo
      }
    }); 

}

</script>

//音频上下文
window.AudioContext=（window.AudioContext | |
window.webkitadiocontext |
window.mozAudioContext | |
window.oAudioContext ||
window.msAudioContext）；
如果（！AudioContext）警报（'此网站无法在您的浏览器中运行。请尝试使用最新的Chrome或Firefox。'）；
var audioContext=新的audioContext（）；
var currentBuffer=null；
//帆布
var canvasWidth=canvasWidth=500，canvasHeight=50；
var newCanvas=createCanvas（画布宽度、画布高度）；
var-context=null；
window.onload=appendCanvas；
函数appendCanvas（）{document.body.appendChild（newCanvas）；
context=newCanvas.getContext（'2d'）；}
//音乐加载器+解码
函数loadMusic（url）{
var req=新的XMLHttpRequest（）；
请求打开（“获取”，url，true）；
req.responseType=“arraybuffer”；
req.onreadystatechange=功能（e）{
如果（req.readyState==4）{
如果（请求状态==200）
audioContext.decodeAudioData（请求响应，
功能（缓冲区）{
currentBuffer=缓冲区；
显示缓冲区（buffer）；
}，编码错误）；
其他的
警报（“加载过程中出错。url错误或跨来源问题”）；
}
} ;
请求发送（）；
}
函数onDecodeError（）{alert（'解码文件时出错'）；}
//音乐显示
函数displayBuffer（buff/*是音频缓冲区*/）{
var抽绳=10000；
var leftChannel=buff.getChannelData（0）；//描述左通道的Float32Array
var lineOpacity=画布宽度/leftChannel.length；
context.save（）；
context.fillStyle='#000'；
fillRect（0,0，画布宽度，画布高度）；
context.strokeStyle='lightgreen'；
context.globalCompositeOperation='lighter'；
翻译（0，画布高度/2）；
context.globalAlpha=0.1；
context.lineWidth=1；
var totallength=leftChannel.length；
var eachBlock=数学楼层（总长度/抽绳）；
var lineGap=（画布宽度/抽绳）；
context.beginPath（）；
对于（var i=0；inot Upload HOW？$\u POST['photo']`是空的吗？嘿，Marc，图像不在/images/song文件夹中……而且它似乎没有转到php页面基本调试，那么：检查
file\u put\u contents（）
的返回值。在处理外部资源时永远不要假设成功。仅仅因为路径“看起来正常”这并不意味着它实际上是可用的。
mkdir（）
也一样。嘿，马克，我不确定我是否需要$\u服务器['DOCUMENT\u ROOT']，我会尝试不使用它。如果没有它，你将尝试在文件系统的根目录下创建该目录，你的Web服务器用户ID几乎可以保证没有权限处理文件。
<?php

    $data = $_POST['photo'];
    list($type, $data) = explode(';', $data);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);

    mkdir($_SERVER['DOCUMENT_ROOT'] . "/images/song");

    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/images/song/".time().'.png', $data);
    die;
?>