清除画布并保存画布答案

【问题标题】：clear Canvas and save Canvas清除画布并保存画布
【发布时间】：2012-07-26 10:50:35
【问题描述】：

我刚刚完成用于图片分析和修复的 Web 应用程序。我需要画布方面的帮助。我就是这样做的：

编辑：

    <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>

但现在我遇到了 clearCanvas 函数的问题。因为浏览器无法读取属性“宽度”。这是我的完整源代码。怎么样，请有人告诉我我做错了什么。

编辑：

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);  
}

用户单击“保存图像”后，我需要将画布保存为本地磁盘上的 jpeg 图像。也就是说，画布中透明的区域变成了黑色背景。

我需要这样的东西： http://i48.tinypic.com/2w5vhpv.jpg

【问题讨论】：

您能否发布ctx 和canvas 的声明，以及它们相对于clearCanvas 的声明位置？
同时使用clearRect 和width 是多余的。也就是说，canvas 的值是多少？
我解决了我的问题。我编辑我的帖子并提供源代码。

标签： php javascript ajax html5-canvas

【解决方案1】：

您可以使用canvas.toDataUrl('image/jpg') 将画布保存到图像文件中。

关于第一个问题：通常您使用context.clearRect(0, 0, canvas.width, canvas.height) 方法清除画布。话虽如此，如果画布和上下文声明正确，您的代码应该可以按预期工作。

【讨论】：

函数 clearCanvas() 和函数 saveViaAJAX() 不工作。你能帮帮我吗？