这是给客户做的一个demo,需求是在线编辑一些文件照片,将里面涉及的人名进行遮挡。
实现过程:点击鼠标后在文件上绘制一个灰色方块,由于坐标误差,所以增加了移动方块的操作。
示例截图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style>
body{ background:black;}
#c1{ background:white;}
span{ color:white;}
</style>
<script>
var mX = 0; // 鼠标坐标
var mY = 0;
var oC;
var oGC;
var cPushArray = new Array();
var cStep = -1;
function showImg() {
document.getElementById('img1').src = document.getElementById('c1').toDataURL();
}
function cPush() {
cStep++;
if (cStep < cPushArray.length) { cPushArray.length = cStep; }
cPushArray.push(document.getElementById('c1').toDataURL());
console.log(cStep)
}
window.onload = function(){
oC = document.getElementById('c1');
oGC = oC.getContext('2d');
var img=new Image()
img.src="img/000.png";
img.onload = function () //确保图片已经加载完毕
{
oGC.drawImage(img,0,0);
cPush();
}
oC.onmousedown = function(ev){
var ev = ev || window.event;
mX = ev.pageX;
mY = ev.pageY;
oGC.fillStyle="#AAAAAA";
oGC.fillRect(mX,mY,21,21);
cPush();
/**oGC.moveTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
document.onmousemove = function(ev){
var ev = ev || window.event;
oGC.lineTo(ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop);
oGC.stroke();
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};**/
};
// oC.onmouseup = function(ev){
// var ev = ev || window.event;
// var x = ev.pageX ;
// var y = ev.pageY;
// oGC.fillRect(mX,mY,x-mX,20);
// };
};
function up() {
console.log("cUndo"+cStep)
if (cStep > 0) {
cStep--;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function () {
oGC.drawImage(canvasPic, 0, 0);
mY = mY - 2;
oGC.fillStyle="#AAAAAA";
oGC.fillRect(mX,mY,21,21);
cPush();
}
}
}
function down() {
console.log("cUndo"+cStep)
if (cStep > 0) {
cStep--;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function () {
oGC.drawImage(canvasPic, 0, 0);
mY = mY + 2;
oGC.fillStyle="#AAAAAA";
oGC.fillRect(mX,mY,21,21);
cPush();
}
}
}
function left() {
console.log("cUndo"+cStep)
if (cStep > 0) {
cStep--;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function () {
oGC.drawImage(canvasPic, 0, 0);
mX = mX - 2;
oGC.fillStyle="#AAAAAA";
oGC.fillRect(mX,mY,21,21);
cPush();
}
}
}
function right() {
console.log("cUndo"+cStep)
if (cStep > 0) {
cStep--;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function () {
oGC.drawImage(canvasPic, 0, 0);
mX = mX + 2;
oGC.fillStyle="#AAAAAA";
oGC.fillRect(mX,mY,21,21);
cPush();
}
}
}
function cUndo() {
console.log("cUndo"+cStep)
if (cStep > 0) {
cStep--;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function () { oGC.drawImage(canvasPic, 0, 0); }
}
}
function cRedo() {
console.log("cRedo"+cStep)
if (cStep < cPushArray.length-1) {
cStep++;
var canvasPic = new Image();
canvasPic.src = cPushArray[cStep];
canvasPic.onload = function () { oGC.drawImage(canvasPic, 0, 0); }
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<canvas id="c1" width="713" height="730">
<span>不支持canvas浏览器</span>
</canvas> <!--默认:宽300 高150-->
</td>
<td>
<input type="button" value="上移" onclick="up()"><br>
<input type="button" value="下移" onclick="down()"><br>
<input type="button" value="左移" onclick="left()"><br>
<input type="button" value="右移" onclick="right()"><br>
<input type="button" value="撤销" onclick="cUndo()"><br>
<input type="button" value="取消撤销" onclick="cRedo()"><br>
<input type="button" value="查看结果图片" onclick="showImg()">
</td>
</tr>
<tr>
<td>
<img alt="点击查看图片按钮可以查看结果" id="img1" src="">
</td>
</tr>
</table>
</body>
</html>