Php 清除画布并保存画布
我刚刚完成用于图片分析和修复的web应用程序。我需要帆布的帮助。我就是这么做的: 编辑:Php 清除画布并保存画布,php,javascript,ajax,html5-canvas,Php,Javascript,Ajax,Html5 Canvas,我刚刚完成用于图片分析和修复的web应用程序。我需要帆布的帮助。我就是这么做的: 编辑: <img id="imgEdit" src="<?php echo $imagename; ?>" border="0"> <canvas id="canvasPaint" width="<?php echo $width; ?>" height="<?php echo $height; ?>">
<img id="imgEdit" src="<?php echo $imagename; ?>" border="0">
<canvas id="canvasPaint"
width="<?php echo $width; ?>"
height="<?php echo $height; ?>">
</canvas>
<input type="button" value="Clear" onClick="clearCanvas();" class="button">
<input type="button" value="Save" onClick="saveViaAJAX();" class="button">
<div id="debugFilenameConsole">Wait for a while after clicking the button and the filename of the image will be shown to you. </div>
function clearCanvas()
{
var theCanvas = document.getElementById("canvasPaint");
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
ctx.clearRect(0, 0, <?php echo $width; ?>, <?php echo $height; ?>);
var srcImg = document.getElementById("imgEdit");
ctx.drawImage(srcImg, 0,0);
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
}}}
function saveViaAJAX()
{
var theCanvas = document.getElementById("canvasPaint");
var canvasData = theCanvas.toDataURL("image/jpg");
var postData = "canvasData="+canvasData;
var ajax = new XMLHttpRequest();
ajax.open("POST",'canvasSave.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
ajax.send(postData);
}
“border=”0“>
您可以使用canvas.toDataUrl('image/jpg')
将画布保存到图像文件中
关于第一个问题:通常使用context.clearRect(0,0,canvas.width,canvas.height)清除画布
方法。也就是说,如果画布和上下文声明正确,您的代码应该可以正常工作。您可以发布ctx
和canvas
的声明,以及它们相对于clearCanvas
的声明位置吗?同时使用clearRect
和width
是多余的。也就是说,canvas
的价值是什么?我解决了我的问题。我编辑了我的帖子并提供了源代码。函数clearCanvas()和函数saveViaAJAX()不起作用。你能帮我吗?