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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<title>img-canvas limit</title>
</head>
<body>
<div>
<span>内存单位: MB</span>
<input type="number" id="jsNumber"/>
</div>
<div>
<button id="jsCreate">创建</button>
</div>
<script>
let queue = [];
let index = 0;
const documentFrame = document.createDocumentFragment();
const createObject = (count) => {
const size = 512;
let canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
let context = canvas.getContext('2d');
index++;
let img = new Image();
img.index = index;
img.onload = () => {
context.drawImage(img, 0, 0, size, size);
if (img.index === count) {
const span = document.createElement('span');
span.innerHTML = '完成' + count;
document.body.appendChild(span);
document.body.appendChild(documentFrame);
}
/* const targetImg = document.createElement('img');
targetImg.src = 'img/img3024-4032.jpg?index=' + img.index;
documentFrame.appendChild(targetImg);
*/
context = null;
canvas = null;
img = null;
};
img.onerror = (error) => {
};
img.src = 'img/img3024-4032.jpg?index=' + index;
return canvas;
};
const loopCreateObject = (n) => {
for (let i = 0; i < n; i++) {
queue.push(createObject(n));
}
};
const input = document.querySelector('#jsNumber');
const button = document.querySelector('#jsCreate');
button.addEventListener('click', (event) => {
event.preventDefault();
const number = input.value;
if (!Number.isNaN(Number(number))) {
queue = [];
loopCreateObject(Number(number));
console.log(`创建${number}MB canvas成功`);
}
});
</script>
</body>
</html>
|
