캔버스 지우기 캔버스 저장

나는 그림 분석 및 수리를위한 웹 응용 프로그램을 마무리하고 있습니다. 캔버스에 도움이 필요해.캔버스 지우기 캔버스 저장

편집 :

<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) 기능에 문제가 이것은 내가 할 것입니다. 브라우저는 'width'속성을 읽을 수 없기 때문입니다. 이것은 내 전체 소스 코드입니다. 어떻게 누군가 제 잘못을 말 할 수 있습니까?

편집 : 내가 로컬 디스크에 JPEG 이미지로 캔버스를 저장해야

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

사용자 후 '이미지를 저장'을 클릭합니다. 즉, 캔버스에서 투명한 영역은 검정색 배경이됩니다. http://i48.tinypic.com/2w5vhpv.jpg

출처

2012-07-27 Rile

'ctx'와'canvas'의 선언을 게시 할 수 있습니까? 그리고 그것들은'clearCanvas'를 기준으로 어디에 선언되어 있습니까? –

'clearRect'와'width' 둘 다 사용하는 것은 불필요합니다. 그렇다면 '캔버스'의 가치는 무엇일까요? – pimvdb

나는 나의 문제를 해결한다. 내 게시물을 편집하고 소스 코드를 제공합니다. – Rile

당신은 canvas.toDataUrl('image/jpg')와 이미지 파일로 캔버스를 저장할 수 있습니다

나는 이런 식으로 뭔가를해야합니다.

첫 번째 질문에 대해서는 일반적으로 context.clearRect(0, 0, canvas.width, canvas.height) 방법으로 캔버스를 지 웁니다. 즉, 캔버스와 컨텍스트 선언이 올바르게 이루어진 경우 코드가 예상대로 작동해야합니다.

출처

2012-07-28 06:08:35

function clearCanvas() 및 saveViaAJAX() 함수가 작동하지 않습니다. 저를 도와주세요? – Rile

캔버스 지우기 캔버스 저장

답변

관련 문제