清晰的帆布和保存画布 [英] clear Canvas and save Canvas

问题描述

我刚刚完成的Web应用程序的图像分析和修补。我需要用帆布帮助。这是我做的：

I am just finishing web application for picture analysis and inpainting. And I need help with canvas. This is what I do:

编辑：

    <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功能。因为浏览器无法读取属性宽度。这是我的完整源$ C ​​$ C。怎么样，请谁能告诉我什么，我做错了。

But now I have problem with clearCanvas function. Because browsers cannot read property 'width'. This is my full source code. How, please can someone tell my what I doing wrong.

编辑：

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图像的用户之后点击保存形象。这意味着，它是透明的画布区域变成黑色背景。

I need to save canvas as jpeg image on local disk after user click 'save image'. That's mean, areas which are transparent in canvas become black background.

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

I need something like this: http://i48.tinypic.com/2w5vhpv.jpg

推荐答案

您可以在画布保存与 canvas.toDataUrl（图像/ JPG'）。

You can save the canvas to an image file with the canvas.toDataUrl('image/jpg').

关于第一个问题：通常你清除与画布context.clearRect（0，0，canvas.width，canvas.height）方法。话虽这么说，你的code应能按预期如果画布和上下文声明已正常。

Regarding the first question: normally you clear the canvas with context.clearRect(0, 0, canvas.width, canvas.height) method. That being said, your code should work as expected if the canvas and context declarations have been made correctly.

这篇关于清晰的帆布和保存画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！