-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathedit_image.html
103 lines (97 loc) · 3.06 KB
/
edit_image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<img
id="img"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.qhimg.com%2Ft018be05be3045a6e22.jpg&refer=http%3A%2F%2Fp0.qhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616853256&t=02be9936cbb0105d7104f3bb22338032"
/>
<script type="text/javascript">
const canvas = document.getElementById("canvas");
const img = document.getElementById("img");
img.style.visibility = "hidden";
// // 纸
const ctx = canvas.getContext("2d");
let startPoint;
let isClick = false;
// 将图片画到画布上
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
// 绘制图片 (0,0)开始1:1绘制img
// ctx.drawImage(img,x,y,width,height);
ctx.drawImage(img, 0, 0, img.width, img.height);
// 实现画框功能
canvas.addEventListener("mousedown", onMouseDown);
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mouseup", onMouseUp);
};
function getPointOnCanvas(canvas, x, y) {
return {
x: x - canvas.offsetLeft,
y: y - canvas.offsetTop
};
}
function onMouseDown(e) {
const x = e.clientX;
const y = e.clientY;
isClick = true;
// 获取起点
startPoint = getPointOnCanvas(canvas, x, y);
ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
}
function getRectParam(curPoint) {
if (startPoint) {
const _w = curPoint.x - startPoint.x;
const _h = curPoint.y - startPoint.y;
// NOTE: _w,_h 为负数时则向相反方向画
console.log(_w, _h);
return {
_startPoint: startPoint,
_w,
_h
};
}
}
function drawRect(curPoint) {
// 获取需要绘制矩形的参数
const newRect = getRectParam(curPoint);
// 先清空再重画
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
if (newRect) {
ctx.beginPath();
// 绘制矩形
ctx.strokeRect(
newRect._startPoint.x,
newRect._startPoint.y,
newRect._w,
newRect._h
);
ctx.closePath();
}
}
function onMouseMove(e) {
const x = e.clientX;
const y = e.clientY;
const curPoint = getPointOnCanvas(canvas, x, y);
if (isClick) {
drawRect(curPoint);
}
}
function onMouseUp(e) {
isClick = false;
}
// canvas 转图片
const dataURL = canvas.toDataURL("image/png");
</script>
</body>
</html>