Waarom wil dit niet croppen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Webdesigner / front-end developer

Jij als Webdesigner / front-end developer bij Crowe Peak. De Perfecte Combinatie. Crowe Peak is binnen Nederland een toonaangevend onderdeel van het internationale Crowe Global, één van de leidende accountancy netwerken in de wereld, gevestigd in meer dan 150 landen. Bij ons vind je best of both wo... Jij als Webdesigner / front-end developer bij Crowe Peak. De Perfecte Combinatie. Crowe Peak is binnen Nederland een toonaangevend onderdeel van het internationale Crowe Global, één van de leidende accountancy netwerken in de wereld, gevestigd in meer dan 150 landen. Bij ons vind je best of both worlds omdat we met 120

Bekijk vacature »

Freelance applicatieontwikkelaar (zzp)

Belastingdienst B/cao Startdatum : 2-1-2023 Tijdelijke functie, met optie op vast Aantal uren per week : 36 Standplaats in overleg : Apeldoorn Applicatieontwikkelaar bij het Ministerie van Financiën- Belastingdienst We zoeken een consultant/developer met ervaring in de ontwikkeling van back-end systemen. Als consultant heb je kennis en ervaring met de wijze waarop Open Formulieren is opgezet. Je bent een vraagbaak voor collega’s en deelt waar nodig je kennis. Je hebt ervaring met het werken in een open source omgeving. Je bent thuis in verschillende frameworks of je kunt je die snel eigen maken. Je hebt aantoonbaar ruime kennis van en

Bekijk vacature »

.NET Software Developer

Dit ga je doen Als Senior .NET Developer zul jij je voornamelijk bezig houden met: Het van scratch af aan bouwen van applicaties (.NET 4.6, C#, Bootstrap, KnockoutJs en WebAPI2); Het testen van jouw code d.m.v. het uitvoeren van unittesten; Het oplossen van bugs in de code; Het onderhouden van contact met collega's betreffende de door jouw ontwikkelde applicaties; Het verbeteren en doorontwikkelen van maatwerkapplicaties. Hier ga je werken Jij gaat aan de slag als Senior .NET Software Ontwikkelaar en gaat je focussen op het bedenken, ontwikkelen en testen van maatwerkapplicaties in voornamelijk C#. Dit ga je doen bij een

Bekijk vacature »

Freelance senior ICT ontwikkelaar (zzp)

Belastingdienst B/cao Startdatum inzet: 9-1-2023 Einddatum inzet: 31-12-2023 Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 86,00 Team LIV is op zoek naar een enthousiaste, flexibele, multitaskende en hands-on ontwikkelaar met veel ervaring in het gedeeltelijk of volledig zelfstandig bepalen van ontwikkel- en realisatie aanpak. Onze nieuwe collega moet in staat zijn te werken in een hectische omgeving waarbij er sprake is van zeer verschillen realisatietrajecten voor wat betreft(technische)diepgang, startmoment (wel/geen beschrijvingen beschikbaar) en klantcontact. De gekozen ontwikkelmethodiek dient passend te zijn voor het op te lossen vraagstuk waarbij samenwerking met de testengineer in relatie tot Systeem integratie test

Bekijk vacature »

Trainee pega developer

Vind jij het leuk om echte business software te maken zonder daarvoor gedetailleerde code te hoeven schrijven? Voor ons hoofdkantoor in Waalwijk zoeken wij een trainee Pega developer voor 36-40 uur per week. Vind jij het leuk om echte business software te maken zonder daarvoor gedetailleerde code te hoeven schrijven? Wij leren je werken met het innovatieve platform van Pega en jij verovert de wereld in elke fase van de digitalisering van ons bedrijf. De Mandemakers Groep, een huis vol mogelijkheden. Je neemt deel aan een geweldig traject. We zijn bezig met de invoering van Customer Service, Sales Automation en

Bekijk vacature »

Medior Frontend developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Bij DPA GEOS werken onze consultants als Frontend Developer in Agile teams bij onze klanten en zijn ze verantwoordelijk voor de grotere webapplicaties. Wil jij dit ook, want we zijn op zoek naar enthousiaste Frontend Developers om ons development team te versterken. Je draagt positief bij aan de teamgeest binnen een projectteam je kijkt verder dan je eigen rol. Eventueel begeleid je ook andere ontwikkelaars in het softwareontwikkelproces. Je gaat webapplicaties maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit

Bekijk vacature »

Freelance applicatieontwikkelaar (zzp)

Belastingdienst B/cao Startdatum : 2-1-2023 Tijdelijke functie, met optie op vast Aantal uren per week : 36 Standplaats in overleg : Apeldoorn Applicatieontwikkelaar bij het Ministerie van Financiën- Belastingdienst We zoeken een consultant/developer met ervaring in de ontwikkeling van back-end systemen. Als consultant heb je kennis en ervaring met de wijze waarop Open Formulieren is opgezet. Je bent een vraagbaak voor collega’s en deelt waar nodig je kennis. Je hebt ervaring met het werken in een open source omgeving. Je bent thuis in verschillende frameworks of je kunt je die snel eigen maken. Je hebt aantoonbaar ruime kennis van en

Bekijk vacature »

Senior Java ontwikkelaar

Als Senior Java ontwikkelaar bij Sogeti ben je onderdeel van onze toonaangevende community. Deze bestaat uit ruim 100 gepassioneerde Java professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze top-opdrachtgevers. Geen werkdag is hetzelfde! Je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfs kritische systemen. Bijvoorbeeld een systeem voor het ondersteunen van treinverkeersleiders bij ProRail of een cliënt-volgsysteem bij Reclassering Nederland. Andere klanten waar wij onder andere voor werken: KPN, Philips, Nationale-Nederlanden, Tendernet, Kamer van Koophandel, ABN AMRO, Alphabet en de Politie. Werken bij Sogeti De Java community

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Full Stack Developer

Samengevat: Wil jij werken bij een nieuw high performance platform? Wil jij werken met de laatste technieken? Heb jij ervaring als developer? Developer Manager HBO 4.000 - 6.500 Bij ons verkopen we alles op het gebied van onderdelen en accessoires voor reparatie, onderhoud en gebruikstoepassingen van apparaten in en rond het huis. Gewoon die onderdelen en accessoires die je zelf kunt installeren of vervangen. Wie goed voor zijn apparaten zorgt, haalt er veel meer uit. We vinden het erg belangrijk dat jij je fijn voelt binnen het bedrijf. Om dit aan te moedigen, biedt deze werkgever je een informele omgeving

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Productontwikkelaar

Over het werk Als productontwikkelaar weet jij als geen ander hoe je de kwaliteit van je product tot perfectie kunt krijgen. In deze functie houd je je bezig met de producten die je toekomstige nieuwe medewerker produceert. Je buigt je, samen met je collega's, over verschillende onderdelen die met de productie te maken hebben. Zo ben je verantwoordelijk voor het verbeteren van de producten, het aanleveren van nieuwe producten en het optimaliseren van het productieproces. Hierbij is het belangrijk om de haalbaarheid van het proces te waarborgen. Alles wat je doet documenteer je, registreer je en kun je overtuigend presenteren

Bekijk vacature »

Senior developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Sr. Java Developer, interested in modelling

Due to the expansion of our applied modelling software team, we are looking for a senior Java Developer, interested in modelling. Aad van Gerwen, Team Manager Applied Modelling: “As a senior model driven engineer at Capgemini Engineering you are involved in the next revolutionary step in software engineering! Our department is focusing on creating and applying (domain-specific) models to drive the engineering process. This approach ensures the time-to-market and quality increase demands our clients face today are met. I am looking for someone who is expert in the field of model-driven engineering and who wants to be part of the

Bekijk vacature »

Freelance senior ICT ontwikkelaar (zzp)

Belastingdienst B/cao Startdatum inzet: 9-1-2023 Einddatum inzet: 31-12-2023 Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 86,00 Team LIV is op zoek naar een enthousiaste, flexibele, multitaskende en hands-on ontwikkelaar met veel ervaring in het gedeeltelijk of volledig zelfstandig bepalen van ontwikkel- en realisatie aanpak. Onze nieuwe collega moet in staat zijn te werken in een hectische omgeving waarbij er sprake is van zeer verschillen realisatietrajecten voor wat betreft(technische)diepgang, startmoment (wel/geen beschrijvingen beschikbaar) en klantcontact. De gekozen ontwikkelmethodiek dient passend te zijn voor het op te lossen vraagstuk waarbij samenwerking met de testengineer in relatie tot Systeem integratie test

Bekijk vacature »
Jan Kila

Jan Kila

01/09/2022 18:39:09
Quote Anchor link
Kan/wil iemand mij zeggen waarom deze code niet wil croppen?
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
53
54
55
<!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.
 
PHP hulp

PHP hulp

01/02/2023 11:20:13
 
Jan R

Jan R

01/09/2022 19:18:15
Quote Anchor link
Het werkt perfect maar je voegt enkel de originele foto toe. Niet de canvas :)
 
Jan Kila

Jan Kila

01/09/2022 19:25:29
Quote Anchor link
Jan,
Dan zie ik echt iets over het hoofd want ik begrijp niet wat je bedoelt.
Wil ja dat toelichten?
 
Jan Koehoorn

Jan Koehoorn

01/09/2022 19:58:17
Quote Anchor link
Het croppen lukt wel, maar je doet dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
document.body.appendChild(cvs)

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

Jan Kila

02/09/2022 10:37:54
Quote Anchor link
@Jan Koehoorn,
Bedankt Jan.
En ik maar denken dat ik op regel 44 de gewijzigde img in de body plaats.

Toevoeging op 02/09/2022 10:37:59:

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

Jan Kila

03/09/2022 16:02:35
Quote Anchor link
Dit is wat ik op het oog had; en het werkt als een trein.
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
...
<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

Jan R

03/09/2022 18:48:09
Quote Anchor link
Javascript
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
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();
}

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
    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 '?';
    }
 
Jan Kila

Jan Kila

03/09/2022 19:04:34
Quote Anchor link
Dank Jan,
Dat opent weer een nieuw gezichtspunt. Eigenwijs als ik ben, zou ik een fetch gebruiken maar dat terzijde.
Inmiddels heb ik toegevoegd;:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
    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

Jan R

03/09/2022 19:39:10
Quote Anchor link
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
Gewijzigd op 04/09/2022 08:16:45 door Jan R
 
Ad Fundum

Ad Fundum

04/09/2022 09:42:15
Quote Anchor link
Daarvoor heb je het DataTransfer object nodig in JavaScript.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
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);
Gewijzigd op 04/09/2022 09:44:55 door Ad Fundum
 
Jan Kila

Jan Kila

04/09/2022 11:33:37
Quote Anchor link
@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.

Toevoeging op 04/09/2022 17:01:06:




Toevoeging op 04/09/2022 17:05:18:

Dit werkt! Helemaal geweldig.
Ook de oude inhoud van <input type="file" ...> is overschreven.
Heel clean, nogmaals dank!
Gewijzigd op 04/09/2022 12:05:40 door Jan Kila
 



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.