1

画像解析と修復のための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関数に問題があります。ブラウザはプロパティ'width'を読み取ることができないためです。これは私の完全なソースコードです。どのように、誰かが私が間違っていることを教えてもらえますか？

編集：

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

4

1 に答える 1

0

でキャンバスを画像ファイルに保存できますcanvas.toDataUrl('image/jpg')。

最初の質問について：通常、context.clearRect(0, 0, canvas.width, canvas.height)メソッドを使用してキャンバスをクリアします。そうは言っても、キャンバスとコンテキストの宣言が正しく行われていれば、コードは期待どおりに機能するはずです。

于 2012-07-28T06:08:35.203 に答える