cbvirtua 1.0.30 → 1.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/canvas.txt +204 -0
- package/package.json +1 -1
package/canvas.txt
ADDED
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
8
|
+
<title>Document</title>
|
|
9
|
+
<style>
|
|
10
|
+
body {
|
|
11
|
+
text-align: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
canvas {
|
|
15
|
+
border: 1px solid;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.newcanvas {
|
|
19
|
+
width: 316px;
|
|
20
|
+
height: 316px;
|
|
21
|
+
margin: auto;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.newpohoto,
|
|
25
|
+
.download {
|
|
26
|
+
width: 300px;
|
|
27
|
+
height: 40px;
|
|
28
|
+
line-height: 40px;
|
|
29
|
+
margin: auto;
|
|
30
|
+
background-color: cornflowerblue;
|
|
31
|
+
border-radius: 5px;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
margin: 10px auto;
|
|
34
|
+
color: white;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
</head>
|
|
38
|
+
|
|
39
|
+
<body>
|
|
40
|
+
<h3>使用canvas实现九宫格切图的效果</h3>
|
|
41
|
+
<div class="mycanvas">
|
|
42
|
+
<canvas width="300" height="300" id="mycnavas"></canvas>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="newpohoto">
|
|
45
|
+
开始切图
|
|
46
|
+
</div>
|
|
47
|
+
<div class="newcanvas">
|
|
48
|
+
<canvas width="100" height="100" id="img1"></canvas>
|
|
49
|
+
<canvas width="100" height="100" id="img2"></canvas>
|
|
50
|
+
<canvas width="100" height="100" id="img3"></canvas>
|
|
51
|
+
<canvas width="100" height="100" id="img4"></canvas>
|
|
52
|
+
<canvas width="100" height="100" id="img5"></canvas>
|
|
53
|
+
<canvas width="100" height="100" id="img6"></canvas>
|
|
54
|
+
<canvas width="100" height="100" id="img7"></canvas>
|
|
55
|
+
<canvas width="100" height="100" id="img8"></canvas>
|
|
56
|
+
<canvas width="100" height="100" id="img9"></canvas>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="download">
|
|
59
|
+
下载图片
|
|
60
|
+
</div>
|
|
61
|
+
<script>
|
|
62
|
+
var canvas = document.getElementById("mycnavas"); //现将图片放上去
|
|
63
|
+
var cxt = mycnavas.getContext("2d");
|
|
64
|
+
var img = new Image();
|
|
65
|
+
img.src = "../img/img10.jpg";
|
|
66
|
+
window.onload = function() {
|
|
67
|
+
cxt.drawImage(img, 0, 0, 400, 300); //画好图片的位置
|
|
68
|
+
}
|
|
69
|
+
var arr = []; //将切的图片存到数组里面
|
|
70
|
+
document.getElementsByClassName("newpohoto")[0].onclick = function() {
|
|
71
|
+
var q = 1;
|
|
72
|
+
for (var i = 0; i < 3; i++) {
|
|
73
|
+
for (var j = 0; j < 3; j++) {
|
|
74
|
+
var data = cxt.getImageData(j * 100, i * 100, 400, 100); //类似于“复制”功能
|
|
75
|
+
var img = document.getElementById("img" + q)
|
|
76
|
+
var newcxt = img.getContext("2d");
|
|
77
|
+
newcxt.putImageData(data, 0, 0); //类似“粘贴”功能
|
|
78
|
+
arr.push(console.log(img.toDataURL(q + ".png"))) //toDataURL()方法的两个参数：DataURL(type, encoderOptions) type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；
|
|
79
|
+
q++;
|
|
80
|
+
console.log(arr)
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
//下载切的图片
|
|
86
|
+
var arr = [];
|
|
87
|
+
document.getElementsByClassName('download')[0].onclick = function() {
|
|
88
|
+
for (var i = 0; i < 9; i++) {
|
|
89
|
+
var a = document.createElement('a');
|
|
90
|
+
a.download = 'img' + (i + 1);
|
|
91
|
+
a.href = arr[i];
|
|
92
|
+
document.body.appendChild(a);
|
|
93
|
+
a.click();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
</script>
|
|
97
|
+
|
|
98
|
+
</body>
|
|
99
|
+
|
|
100
|
+
</html>
|
|
101
|
+
————————————————
|
|
102
|
+
|
|
103
|
+
import { useState } from "react";
|
|
104
|
+
|
|
105
|
+
import _ from "lodash";
|
|
106
|
+
|
|
107
|
+
export const useCutImg = (url: string | undefined, points: number[][]) => {
|
|
108
|
+
const [result, setResult] = useState<string | undefined>();
|
|
109
|
+
if (points.length > 3 || points.length < 1) {
|
|
110
|
+
console.error("points's length should be 2");
|
|
111
|
+
return [""];
|
|
112
|
+
}
|
|
113
|
+
if (!url) {
|
|
114
|
+
console.error("can not find image url");
|
|
115
|
+
return [""];
|
|
116
|
+
}
|
|
117
|
+
let dx = 0;
|
|
118
|
+
let dy = 0;
|
|
119
|
+
let width = 0;
|
|
120
|
+
let height = 0;
|
|
121
|
+
|
|
122
|
+
dx = _.get(points, "[0][0]", 0);
|
|
123
|
+
dy = _.get(points, "[0][1]", 0);
|
|
124
|
+
const ex = _.get(points, "[1][0]", 0);
|
|
125
|
+
const ey = _.get(points, "[1][1]", 0);
|
|
126
|
+
width = ex - dx;
|
|
127
|
+
height = ey - dy;
|
|
128
|
+
|
|
129
|
+
const img = new Image();
|
|
130
|
+
// 本地环境下，带有域名的图片地址存在跨域，设置crossOrigin，允许跨域
|
|
131
|
+
img.setAttribute("crossOrigin", "Anonymous");
|
|
132
|
+
img.src = url;
|
|
133
|
+
img.onload = function () {
|
|
134
|
+
const canvas = document.createElement("canvas");
|
|
135
|
+
const ctx = canvas.getContext("2d");
|
|
136
|
+
if (!ctx) {
|
|
137
|
+
console.error("cannot init screenshot canvas");
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
canvas.width = width;
|
|
141
|
+
canvas.height = height;
|
|
142
|
+
ctx.drawImage(img, dx, dy, width, height, 0, 0, width, height);
|
|
143
|
+
const data = canvas.toDataURL("image/png");
|
|
144
|
+
setResult(data);
|
|
145
|
+
};
|
|
146
|
+
return [result];
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
const sliceImage = () => {
|
|
151
|
+
const canvas = document.createElement("canvas");
|
|
152
|
+
const context = canvas.getContext("2d");
|
|
153
|
+
if (!context || !imageRef.current) {
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
const imageWidth = imageRef.current.naturalWidth;
|
|
157
|
+
const imageHeight = imageRef.current.naturalHeight;
|
|
158
|
+
|
|
159
|
+
const xLines = draggableListData
|
|
160
|
+
.filter((item) => item.axis === "x")
|
|
161
|
+
.map((item) =>
|
|
162
|
+
item.newPosition ? item.newPosition.x : item.defaultPosition.x
|
|
163
|
+
)
|
|
164
|
+
.map((item) => Math.round(item / scale))
|
|
165
|
+
.concat(imageWidth)
|
|
166
|
+
.sort((a, b) => a - b);
|
|
167
|
+
console.log(xLines);
|
|
168
|
+
const yLines = draggableListData
|
|
169
|
+
.filter((item) => item.axis === "y")
|
|
170
|
+
.map((item) =>
|
|
171
|
+
item.newPosition ? item.newPosition.y : item.defaultPosition.y
|
|
172
|
+
)
|
|
173
|
+
.map((item) => Math.round(item / scale))
|
|
174
|
+
.concat(imageHeight)
|
|
175
|
+
.sort((a, b) => a - b);
|
|
176
|
+
for (let y = 0; y < yLines.length; y++) {
|
|
177
|
+
for (let x = 0; x < xLines.length; x++) {
|
|
178
|
+
const sliceX = x === 0 ? 0 : xLines[x - 1];
|
|
179
|
+
const sliceY = y === 0 ? 0 : yLines[y - 1];
|
|
180
|
+
const sliceWidth =
|
|
181
|
+
x === xLines.length - 1 ? imageWidth - sliceX : xLines[x] - sliceX;
|
|
182
|
+
const sliceHeight =
|
|
183
|
+
y === yLines.length - 1 ? imageHeight - sliceY : yLines[y] - sliceY;
|
|
184
|
+
|
|
185
|
+
canvas.width = sliceWidth;
|
|
186
|
+
canvas.height = sliceHeight;
|
|
187
|
+
|
|
188
|
+
context.drawImage(
|
|
189
|
+
imageRef.current,
|
|
190
|
+
sliceX,
|
|
191
|
+
sliceY,
|
|
192
|
+
sliceWidth,
|
|
193
|
+
sliceHeight,
|
|
194
|
+
0,
|
|
195
|
+
0,
|
|
196
|
+
sliceWidth,
|
|
197
|
+
sliceHeight
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
const sliceData = canvas.toDataURL("image/png");
|
|
201
|
+
downloadSlice(sliceData, `slice_${x}_${y}.png`);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
};
|