[Error] TypeError: null is not an object (evaluating 'cavs.getContext') ...
Wat me niet duidelijk is, is waarom het de ene keer wel werkt en de andere keer.
Maar wat ik natuurlij wil weten, is hoe ik er voor kan zorgen dat het altijd werkt.
Het relevante deel van het door een GO template gegenereerde HTML is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</footer>
</div>
<script src="https://unpkg.com/notie"></script>
<script>
sDate = (x) => {dp.attach({ target: document.getElementById("start-date")})}
sTime = (x) => {tp.attach({ target: document.getElementById("start-time")})}
eDate = (x) => {dp.attach({ target: document.getElementById("end-date")})}
eTime = (x) => {tp.attach({ target: document.getElementById("end-time")})}
</script>
<script src="/static/js/newtocht.js"></script>
<script src="/static/js/date-picker.js"></script>
<script src="/static/js/time-picker.js"></script>
<script>
function notify(msg, msgType) {
notie.force({
type: msgType,
text: msg,
buttonText: 'Klik mij weg',
});
}
</script>
</body>
</html>
</div>
<script src="https://unpkg.com/notie"></script>
<script>
sDate = (x) => {dp.attach({ target: document.getElementById("start-date")})}
sTime = (x) => {tp.attach({ target: document.getElementById("start-time")})}
eDate = (x) => {dp.attach({ target: document.getElementById("end-date")})}
eTime = (x) => {tp.attach({ target: document.getElementById("end-time")})}
</script>
<script src="/static/js/newtocht.js"></script>
<script src="/static/js/date-picker.js"></script>
<script src="/static/js/time-picker.js"></script>
<script>
function notify(msg, msgType) {
notie.force({
type: msgType,
text: msg,
buttonText: 'Klik mij weg',
});
}
</script>
</body>
</html>
Het betreffende JS in file newtocht.js:
Code (php)
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
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
window.addEventListener('load', () => {
const thumbUpload = document.getElementById('thumb-upload')
const selectFail = document.getElementById('thumb-select-failed')
const cavs = document.getElementById('cvs')
const ctx = cavs.getContext('2d')
const img = new Image()
thumbUpload.addEventListener("change", (e) => {
const [file] = thumbUpload.files;
selectFail.innerHTML = "";
selectFail.style.display = "inline-block";
// Check file size
if (file.size > (1024 * 1024)) {
selectFail.innerHTML = "Oeps... Thumbnail kleiner dan 1 Mb!";
selectFail.style.display = "inline-block";
return;
}
document.getElementById('thumb-name').value = file.name
img.src = URL.createObjectURL(file);
img.onload = function() {
if (img.height > img.width) {
sX = 0
sY = Math.floor((img.height - img.width) / 2)
sW = img.width
} else {
sX = Math.floor((img.width - img.height) / 2)
sY = 0
sW = img.height
}
ctx.drawImage(img, sX, sY, sW, sW, 0, 0, 150, 150);
URL.revokeObjectURL(img.src);
cvs.toBlob(function(blob) {
let file = new File([blob], 'thumbNailUpload.jpg',
{type: 'image/jpeg', lastModified: new Date().getTime() } ),
transfer = new DataTransfer();
transfer.items.add(file);
let input = document.getElementById('thumb-upload');
input.files = transfer.files;
document.getElementById('thumb-path').value = 'thumbNailUpload'
}, 'image/jpeg', 0.9);
}
}, false)
// UPLOAD GPX BESTAND
document.querySelector('#gpx-upload').onchange = () => {
document.querySelector('#gpx-display').textContent = this.files[0].name
}
})
const thumbUpload = document.getElementById('thumb-upload')
const selectFail = document.getElementById('thumb-select-failed')
const cavs = document.getElementById('cvs')
const ctx = cavs.getContext('2d')
const img = new Image()
thumbUpload.addEventListener("change", (e) => {
const [file] = thumbUpload.files;
selectFail.innerHTML = "";
selectFail.style.display = "inline-block";
// Check file size
if (file.size > (1024 * 1024)) {
selectFail.innerHTML = "Oeps... Thumbnail kleiner dan 1 Mb!";
selectFail.style.display = "inline-block";
return;
}
document.getElementById('thumb-name').value = file.name
img.src = URL.createObjectURL(file);
img.onload = function() {
if (img.height > img.width) {
sX = 0
sY = Math.floor((img.height - img.width) / 2)
sW = img.width
} else {
sX = Math.floor((img.width - img.height) / 2)
sY = 0
sW = img.height
}
ctx.drawImage(img, sX, sY, sW, sW, 0, 0, 150, 150);
URL.revokeObjectURL(img.src);
cvs.toBlob(function(blob) {
let file = new File([blob], 'thumbNailUpload.jpg',
{type: 'image/jpeg', lastModified: new Date().getTime() } ),
transfer = new DataTransfer();
transfer.items.add(file);
let input = document.getElementById('thumb-upload');
input.files = transfer.files;
document.getElementById('thumb-path').value = 'thumbNailUpload'
}, 'image/jpeg', 0.9);
}
}, false)
// UPLOAD GPX BESTAND
document.querySelector('#gpx-upload').onchange = () => {
document.querySelector('#gpx-display').textContent = this.files[0].name
}
})
Ik trap hier blijkbaar ergens in en ik weet niet wat, elke hulp is welkom.
Toevoeging op 11/10/2022 16:01:31:
Dit is een stommiteit van mij. Ik had de betreffende HTML uitgecommentarieerd:
<canvas id="cvs" width="150" height="150"></canvas>
En dan is het geen groot wonder dat JS protesteert.
Sorry, mod gooi dit maar gauw weg.
