[Error] TypeError: null is not an object (evaluating 'cavs.getContext') ...

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan Kila

Jan Kila

11/10/2022 15:44:12
Quote Anchor link
De oorzaak van deze foutmelding is me duidelijk: JS kan 'cavs.getContext' niet uitvoeren.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Het betreffende JS in file newtocht.js:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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
  }
})


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.
 
PHP hulp

PHP hulp

23/02/2024 15:21:17
 
- Ariën  -
Beheerder

- Ariën -

11/10/2022 16:09:14
Quote Anchor link
We gooien niks weg. Het forum is een mooie knowledgebase. ;-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.