保存没有光标图像的html5画布

时间:2013-09-30 16:19:53

标签: javascript html5 save easeljs

我一直在使用EaselJS代码来处理我一直在开发的html5画布。我在画布上添加了一个保存功能。当我使用.toDataURL变量保存图像时,光标图像出现在保存的图像上。我希望有一种方法可以使光标透明,或者是一种使光标图像不会出现在我的saveImage函数中的代码。

光标绘制代码

function handleMouseMove(event) {
cursor.x = stage.mouseX;
cursor.y = stage.mouseY;

        if (!isDrawing) {
            stage.update();
            return;
        }

        var midPoint = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);

                drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
                    .beginStroke("rgba(0,0,0,0.15)")
                    .moveTo(midPoint.x, midPoint.y)
                    .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

        oldPt.x = stage.mouseX;
        oldPt.y = stage.mouseY;

        oldMidPt.x = midPoint.x;
        oldMidPt.y = midPoint.y;

        updateCacheImage(true);

    }

    function handleMouseUp(event) {
        updateCacheImage(true);
        isDrawing = false;
    }

保存功能

 function saveImage() {
 var canvasData = testCanvas.toDataURL("image/png");
window.open(testCanvas.toDataURL("images/png"));
 var xmlHttpReq = false;       
 if (window.XMLHttpRequest) {
     ajax = new XMLHttpRequest();
 }

 else if (window.ActiveXObject) {
     ajax = new ActiveXObject("Microsoft.XMLHTTP");
 }
ajax.open('POST', 'testSave.php', false);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
 }
ajax.send("imgData="+canvasData);
}

0 个答案:

没有答案