微信端p5js使用Ajax+php向服务器发送图片


最近在研究p5js绘图后,用户可以点击按钮把图片上传至服务器的一系列流程。
核心重点:

1、当点击“saveButton”按钮后执行saveDrawing函数
var saveButton = select(‘#saveButton’);
saveButton.mousePressed(saveDrawing);
}
2、p5js默认画布id是defaultCanvas0,将它用toDataURL转为base64的png
var canvas = document.getElementById(“defaultCanvas0”);
var dataURL = canvas.toDataURL();
3、用Ajax把图片发给php传到服务器,如果使用微信的话必须加“ajax.open(“GET”,”AjaxServlet”,true)”,其他h5浏览器无所谓
var ajax;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {
ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
}
ajax.open(“GET”,”AjaxServlet”,true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
alert(ajax.responseText+”发送完毕”);
}
}
ajax.open(“POST”, “save.php”, true);
ajax.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
ajax.send(“img=” + dataURL);
4、save.php负责将js端post过来的base64图片保存到服务器端


发表评论

您的电子邮箱地址不会被公开。