我正在编写一个需要注释图像的web应用程序。为此,我使用了html5的画布。感谢网络,我发现了许多相似的代码。但我在开发代码后遇到了一个问题。
context.clearRect(pos.x,pos.y,pos.x,pos.y);
这是我用来擦除画布中线条的代码。我希望代码能擦除鼠标指针所在的位置。但代码所做的是擦除行,即使鼠标指针离行更近。
编辑:我发现擦除有问题。clearRect()的语法是
context.clearRect(x,y,width,height);
当我把位置x和位置y分别作为宽度和高度时,它正在擦除一大片区域。现在我把这两个值改为5,5,我可以擦除指针所在的位置
此外,我需要在完全注释后保存注释图像。我将这些图像作为画布的背景。我在画布上画线。当点击查看图像时,我只能看到线条。请检查我的代码,告诉我如何执行这两项操作。这是我的密码。
<%@ taglib uri="/struts-tags" prefix="s" %>
<html>
<head>
<title>Success: Upload User Image</title>
<style>
canvas { background:url("images/<s:property value="userImageFileName"/>") ;
background-size: 100% 100%;
background-repeat: no-repeat;}
</style>
</head>
<body>
<h2>utStruts2 File Upload Example</h2>
<img id="result" src="images/<s:property value="userImageFileName"/>" width="565" height="584" class="annotatable"/>
<canvas id="myCanvas" width="565" height="584" style="border:1px solid #d3d3d3;" >
Please use a modern browser like Firefox, Chrome, Safari
</canvas>
<input type="button" value="draw" onClick="draw()">
<input type="button" value="eraser" onClick="erase()">
<canvas id="canvas2" width="565" height="584" hidden="true"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var coord = document.getElementById('coord');
var context = canvas.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var cantext2 = canvas2.getContext('2d');
function draw(){
mode="draw";
operate(mode);
}
function erase(){
mode="erase";
operate(mode);
}
function operate(mode)
{
var mousedown = false;
context.strokeStyle = '#0000FF';
context.lineWidth = 5;
canvas.onmousedown = function(e) {
var pos = fixPosition(e, canvas);
mousedown = true;
context.beginPath();
context.moveTo(pos.x, pos.y);
//return false;
};
canvas.onmousemove = function(e) {
var pos = fixPosition(e, canvas);
if (mousedown) {
if(mode=="draw"){
context.lineTo(pos.x, pos.y);
context.stroke();
}
if(mode=="erase"){
context.clearRect(pos.x,pos.y,pos.x,pos.y);
context2.drawImage(canvas, 0, 0);
context.clearRect(0, 0, 565, 584);
context.drawImage("images/<s:property value="userImageFileName"/>", 0, 0);
context.drawImage(canvas2, 0, 0);
}
}
};
canvas.onmouseup = function(e) {
mousedown = false;
};
function fixPosition(e, gCanvasElement) {
var x;
var y;
x = e.pageX;
y = e.pageY;
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
return {x:x, y:y};
}
}
</script>
</body>
</html>
clearRect
接受以下参数:(xpos, ypos, width, height)
问题:
在canvas.onmousemove
功能中(在"擦除"模式下),您有:context.clearRect(pos.x,pos.y,pos.x,pos.y);
嗯,那不可能是对的。。
然后,根据鼠标位置擦除区域大小后,将context
的剩余部分复制到某个缓冲画布context2
:context2.drawImage(canvas, 0, 0);
然后清除整个绘图画布:context.clearRect(0, 0, 565, 584);
解决方案:
一旦你修复了上面的问题(这样鼠标指针就可以像橡皮擦一样工作),你就想添加一个函数来组合/导出/存储你的注释图像:
首先使用缓冲区context2
绘制(原始)图像,然后在此基础上绘制注释图像(均使用drawImage()
)(考虑图层)。
最后,使用.toDataURL()
方法从context2
缓冲区输出组合图像(并使用AJAX等发送结果(base64编码的数据url,这是一个简单的字符串))。
此外:
- 你可能想知道你不需要标记你的缓冲区,只需要在内存中创建它:
var canvas2=document.createElement('canvas');
- 你的var
mode
正在泄漏到全局(我只会发布operate('draw')
等,并保存腰部操作,以利于更好的用户体验响应能力("无工作可做"))