Javascript 在没有光标图像的情况下保存html5画布
我一直在为我开发的html5画布使用EaselJS代码。我在画布上添加了一个保存函数。当我使用.toDataURL变量保存图像时,光标图像将显示在保存的图像上。我希望有一种方法可以使光标透明,或者有一种代码可以防止光标图像出现在我的saveImage函数中 光标绘制代码Javascript 在没有光标图像的情况下保存html5画布,javascript,html,save,easeljs,Javascript,Html,Save,Easeljs,我一直在为我开发的html5画布使用EaselJS代码。我在画布上添加了一个保存函数。当我使用.toDataURL变量保存图像时,光标图像将显示在保存的图像上。我希望有一种方法可以使光标透明,或者有一种代码可以防止光标图像出现在我的saveImage函数中 光标绘制代码 function handleMouseMove(event) { cursor.x = stage.mouseX; cursor.y = stage.mouseY; if (!isDrawing) {
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);
}
我不知道你使用的插件,但如果没有人能给你一个解决方案,试试看,我猜对了吗,你已经把自己的光标图像放在舞台上了?如果是这样,那么只需将其添加到
saveImage()
:cursor.visible=false;stage.update()代码>-保存图像后,不要忘记再次显示光标。