Waarom wil dit niet croppen

Door Jan Kila op 01-09-2022 18:39

2.158 views

Kan/wil iemand mij zeggen waarom deze code niet wil croppen?


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Image Cropping Javascript</h1>
  <input type="file">
  
  <script>
    const input = document.querySelector('input[type="file"]')
    input.addEventListener('change', (e) => {
      console.log(input.files) 
      const reader = new FileReader()
      reader.onload = function() {
        const img = new Image() // 'img' HTMLImageElement
        img.onload = function(){
          let cvs = document.createElement('canvas')
          const ctx = cvs.getContext('2d')
          ctx.drawImage(img, 0, 0)
          orgWidth = img.width
          orgHeigth = img.height
          console.log("orgWidth: ", orgWidth)
          console.log("orgHeigth: ", orgHeigth)
          if (orgWidth > orgHeigth) {
            sWidth = orgHeigth
            sX = Math.floor((orgWidth - orgHeigth) / 2)
            sY = 0
          } else {
            sWidth = orgWidth
            sX = 0
            sY = Math.floor((orgHeigth - orgWidth) / 2)
          }
          console.log("sWidth: ", sWidth)
          console.log("sX: ", sX)
          console.log("sY: ", sY)
          cvs.width = sWidth
          cvs.height = sWidth
          // ctx.drawImage(img, 0, 0)
          // drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
          ctx.drawImage(img, sX, sY, sWidth, sWidth, 0, 0, sWidth, sWidth)
          document.body.appendChild(img)
        }
        img.src = reader.result
        // now we have an image that we can append to the document
        //document.body.appendChild(img)
      }
      reader.readAsDataURL(input.files[0])
    }, false)
  </script>
</body>
</html>

Ik krijg steeds het originele plaatje terwijl ik een vierkant plaatje verwacht.
Meestal doe ik iets fout, onvoldoende of niet; maar deze keer zie ik het niet (meer).
Een beetje hulp kan ik dan ook goed gebruiken.
Dank op voorhand.

Jan R

01-09-2022 19:18

Het werkt perfect maar je voegt enkel de originele foto toe. Niet de canvas :)

J Jan Kila

01-09-2022 19:25

Jan,
Dan zie ik echt iets over het hoofd want ik begrijp niet wat je bedoelt.
Wil ja dat toelichten?

Jan Koehoorn

01-09-2022 19:58

Het croppen lukt wel, maar je doet dit:


 document.body.appendChild(img)

op regel 45 van je script. Je koppelt dus de originele img aan je body element. Als je er dit van maakt:


 document.body.appendChild(cvs)

dan koppel je het canvas element waar de gecropte versie op getekend is.

J Jan Kila

02-09-2022 10:37

@Jan Koehoorn,
Bedankt Jan.
En ik maar denken dat ik op regel 44 de gewijzigde img in de body plaats.

[size=xsmall]Toevoeging op 02/09/2022 10:37:59:[/size]

@Jan Koehoorn,
Bedankt Jan.
En ik maar denken dat ik op regel 44 de gewijzigde img in de body plaats.

J Jan Kila

03-09-2022 16:02

Dit is wat ik op het oog had; en het werkt als een trein.


...
<style>
  .canvas {
    width: 150px;
    height: 150px;
    border: 1px solid black;
  }
</style>
<body>
  <h1>Image Editing Javascript</h1>
  <input type="file">
  <br>
  <div class="canvas">
    <canvas id="cvs"></canvas>
  </div>

  <script>
    const cvs = document.getElementById('cvs')
    const ctx = cvs.getContext('2d')
    const img = new Image()
    const input = document.querySelector('input[type="file"]')
    input.addEventListener('change', (e) => {
      const [file] = input.files
      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)
      }
    }, false)
  </script>
</body>
</html>

Mijn volgende stap is om het plaatje dat nu in het canvas zit naar de server te uploaden.
1. Ik moet de inhoud van het canvas omvormen naar een blob
2. Vervolgens het blob in een file plaatsen
3. de file uploaden naar de server.
Stukjes en beetjes vind ik op SO, maar ik mis het hele 'plaatje', het overzicht.
Wil iemand me in de goeie richting wijzen?

Jan R

03-09-2022 18:48

Javascript


function send() {
    let cfoto = document.getElementById("ccanvas");
    let canvasData = cfoto.toDataURL("image/png");
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            msg = xhttp.responseText;
            if(msg != "") {
                alert(msg);
            }else{
                location.reload(true);
            }
        }
    };   
    xhttp.open("POST", "getpost.php", true);
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhttp.send("v=" + canvasData);
    sluit();
}


    if(isset($_POST['v'])) {
        $data = $_POST['v'];
        $data = str_replace(' ', '+', $data);
        list($type, $data) = explode(';', $data);
        list($base, $data) = explode(',', $data);
        if($type=='data:image/png' && $base=='base64') {
            $data = base64_decode($data);
            
            $ip = $_SERVER['REMOTE_ADDR'] ?? '';
            $ip = '_' . str_replace(':', '.', $ip);
            
            file_put_contents('screendump_' . date('Ymd_his') . $ip . '.png', $data);
            echo 'Bestand opgeslagen!';
        }else{
            echo 'Geen correcte info!';
        }
    }else{
        echo '?';
    }

J Jan Kila

03-09-2022 19:04

Dank Jan,
Dat opent weer een nieuw gezichtspunt. Eigenwijs als ik ben, zou ik een fetch gebruiken maar dat terzijde.
Inmiddels heb ik toegevoegd;:


    img.onload = function() {
    ...
      cvs.toBlob( blob => {
        const anchor = document.createElement('a')
        anchor.download = 'cropped-image.png'
        anchor.href = URL.createObjectURL(blob)
        anchor.click()
        URL.revokeObjectURL(anchor.href)
      }, 'image/png', 0.9)

Dit levert me een file met het gecropte en verkleinde plaatje in:
~/Downloads/cropped-image.png

Nu zoek ik naar een mogelijkheid om die file in:
<input type="file" id="upload" name="upload"
te krijgen zonder dat de bezoeker opnieuw op een knop moet drukken.

Is het in javascript mogelijk om een pointer te wijzigen die ongetwijfeld 'ergens' in de ' <input type="file"' instructie verborgen zit. Ik denk het eigenlijk niet omdat dit een veiligheidslek van mega orde zou zijn.
Maar... hoe dan wel?

Jan R

03-09-2022 19:39 gewijzigd op 04-09-2022 08:16

Je kan zeker niet de data in een input:file steken. Dit zou moeten impliceren dat je een bestand op de locale computer kunt schrijven. VEILIGHEID=0

? Onbekende gebruiker

04-09-2022 09:42 gewijzigd op 04-09-2022 09:44

Daarvoor heb je het DataTransfer object nodig in JavaScript.


canvas.toBlob(function(blob) {
  let file = new File([blob], 'img.jpg',
    {type: 'image/jpeg', lastModified: new Date().getTime() } ),
  transfer = new DataTransfer();
  transfer.items.add(file);
  let input = document.getElementById('<id_van_je_input_file_element>');
  input.files = transfer.files;
}, 'image/jpeg', 0.9);

J Jan Kila

04-09-2022 11:33 gewijzigd op 04-09-2022 12:05

@Ad Fundum,
Dank! Ik heb het nog niet uitgewerkt, maar het lijkt vreselijk veel op hetgeen ik bedoel.
Als ik het ga gebruiken zie ik het wel. Ik vraag me nog af of de oorspronkelijke file dan ook uit het <input type="file" ...> element is verdwenen/overschreven.

De HTML Drag and Drop API, heb ik heel niet aan gedacht; nogmaals dank.

Heel knap dat je dit hebt gevonden. In de documentatie kan ik geen method add() van het items object ontdekken. Maar, zoals vaak, ik kijk misschien niet goed.

[size=xsmall]Toevoeging op 04/09/2022 17:01:06:[/size]

[size=xsmall]Toevoeging op 04/09/2022 17:05:18:[/size]

Dit werkt! Helemaal geweldig.
Ook de oude inhoud van <input type="file" ...> is overschreven.
Heel clean, nogmaals dank!

Reageren

Inloggen om te reageren