Waarom wil dit niet croppen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Front-end developer

Functie Jij komt te werken in een team van 5 developers. het product is continue in beweging. Nieuwe en bestaande klanten vragen om vaak nieuwe features. Hierin ben jij zeer belangrijk om te zorgen dat de functionaliteiten goed opgezet worden op technisch vlak. Designs krijg je aangeleverd van een externe partij zodat jij je primair kan focussen op de techniek! Je hebt daarbij alle vrijheid om je eigen creativiteit toe te passen en mee te denken over de gebruikte technieken. Het gezamenlijke doel is een product dat functioneel zeer gebruiksvriendelijk is en het bedrijfsproces van de gebruikers versneld en kwalitatief

Bekijk vacature »

Junior full stack developer

Functie Als full stack developer binnen onze organisatie ga jij je bezig houden met het bouwen van de user experience van de webapplicaties. Je bent verantwoordelijk voor het vertalen van concepten, briefings en designs naar werkende functionaliteit. Hierbij zorg je ervoor dat applicaties betrouwbaar, veilig en toekomstbestendig zijn en een goede architectuur hebben en behouden. Verder denk je actief na- en mee over nieuwe ontwikkelingen en functionaliteiten om zo elke dag de klantervaring weer te verbeteren. Dit doe je natuurlijk niet alleen maar in een development team. Het team bedraagt momenteel 4 man bestaande uit 2 devops engineers en 2

Bekijk vacature »

Back-end Software Developer

Functie omschrijving Ben jij op zoek naar een uitdagende development functie bij een klein gespecialiseerd softwarebedrijf? Wil jij graag hybride werken (combi tussen thuis + kantoor), loop jij warm voor maatwerk software en voel jij je prettig in een informele cultuur? Zoek dan niet verder! Reageer direct! Voor een gewilde werkgever in omgeving Tilburg zoeken wij een back-end software developer met een aantal jaar werkervaring. Je gaat werken voor een klein softwarebedrijf dat gespecialiseerd is in de ontwikkeling van integratiesoftware. Jouw werkzaamheden zien er als volgt uit: In een klein team met 4 ontwikkelaars houd jij je bezig met afwisselende

Bekijk vacature »

Fullstack developer

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie werken? Voor een mooi softwarebedrijf in omgeving Gouda zijn wij op zoek naar versterking op de afdeling Software Development! Als Fullstack react.js developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Onderdelen van jouw functie: Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook

Bekijk vacature »

Web Application Developer

Dit ga je doen Samen met het team werk je aan de visualisatie functionaliteiten en hoe dit gebruikt kan worden in een operationele setting; Het ontwerpen, ontwikkelen, onderhouden en leveren van support betreft het Warehouse Management Systeem en de bijbehorende web visualisaties; Je gebruikt hierbijde tools WebGL en ASP.net; Het meewerken in implementatieprojecten; Het leveren van Go-Live Support; Sparren met jouw Amerikaanse collega's. Hier ga je werken Voor een internationale organisatie in de transport zijn wij momenteel op zoek naar een Web Application Developer. Ze zijn wereldwijd de grootste speler en lopen voorop met het automatiseren van alle processen van

Bekijk vacature »

JAVA Programmeur

Bedrijfsomschrijving Functieomschrijving We zoeken per direct enthousiaste software engineers die ons team komen versterken.We werken in DevOps teams met een sterk gevoel voor verantwoordelijkheid. Er wordt nauw samengewerkt met ons Business analyse team (BAT), met onze uitvoerende medewerkers en met de DevOps teams onderling binnen het domein. Het liefst hebben we veel en vaak interactie met onze interne en externe eindgebruikers om zo de juiste dingen te maken. We werken multidisciplinair in een dynamische omgeving. Achtergrond opdracht De Businesseenheid Examens is verantwoordelijk voor de logistiek van de staatsexamens Voortgezet (speciaal) onderwijs, Nederlands als 2e taal en schoolexamens. In het kader

Bekijk vacature »

Front-end developer wanted! (Angular, React, Vue.j

Functie Under the guidance of 3 account managers, one of whom will be your point of contact within your expertise, you will start working for various clients. He or she will help you find a suitable and challenging assignment. Naturally, they will take your situation, experience and (technical) ambitions into account. The assignments last one to two years on average. This allows you to really commit to a project and make an impact as a consultant. Besides the assignment, you will regularly meet your colleagues from the IT department to share knowledge or discuss new trends, for example. Master classes

Bekijk vacature »

Software developer (Python)

Functie Je komt te werken in het IT-team bestaande uit de Lead developer en 4 (medior/senior) developers. Gezamenlijk werken jullie aan de verbetering en uitbreiding van de software. Binnen het development team is er veel vrijheid en zelfstandigheid, zonder dat ze hiermee afdoen aan de kwaliteit. Zo hebben ze elke ochtend een korte stand-up (10:00 uur) en houden ze zo nu en dan pair-programming sessies. Ook is er een hele professionele ontwikkelcyclus waarbij code altijd eerst door een collega wordt getest voordat het naar deployement gaat. Je hebt in je werk oog voor kwaliteit, risico’s en het klantbelang. Communicatie met

Bekijk vacature »

Senior Software Developer C++

Vacature details Vakgebied: Software/IT Opleiding: Senior Vacature ID: 13342 Introductie Do you want to work for one of the most innovative companies located in the region of Eindhoven. Currently Due to growth we are looking for a Senior Software Developer. Our client is a high-tech company with international roots and can provide you with a challenging opportunity. Functieomschrijving Responsibilities: Design, develop, and maintain high-quality software applications in C++ Collaborate with other engineers, product managers, and stakeholders to understand requirements and develop solutions Write clean, maintainable, and efficient code Conduct thorough testing and debugging to ensure high-quality software Optimize applications for

Bekijk vacature »

Account Developer

Voor Bol.com zijn wij per direct op zoek naar een Account Developer voor 32-40 uur per week op het kantoor in Utrecht. Wil jij een directe bijdrage leveren door partners van de juiste data-inzichten te voorzien en via campagnes op nieuwe platformkansen en features te wijzen? Ben jij analytisch sterk en kun jij dit vertalen naar plannen en inspirerende gesprekken? Lees dan snel verder! wat bieden wij jou Salaris van €2400 - €2600 obv 40 uur Minimaal 6 maanden Werklocatie is Utrecht Werken bij bol.com wie ben jij Jij bent commercieel gedreven en weet altijd aan de juiste knoppen te

Bekijk vacature »

Front-end Developer

Functie omschrijving Gezocht front-end developer! Voor een toffe organisatie in de regio Rhenen zij wij op zoek naar een front-end developer die de eindverantwoordelijkheid op zich neemt van alles wat met design te maken heeft. In deze functie heb je een adviserende rol en beschik je over een grote dosis vakinhoudelijke kennis. Samen met collega’s en klanten overleg je om aangeleverde designs om te zetten naar unieke concepten. Zo draag jij je steentje bij aan de groeiambities van de klant. Voor klanten wordt jij het vaste aanspreekpunt als het gaat over planningen hierin houdt je alle betrokkenen goed op de

Bekijk vacature »

Senior .NET developer

Klaar voor een nieuwe uitdaging? Welke technologieën gaan schuil achter de dagelijkse energievoorziening? Als senior .NET developer bij Kenter maak jij samen met je team het verschil, zowel voor de interne organisatie als voor eindklanten. Samen bouwen jullie aan innovatieve dienstverlening met behulp van de nieuwste technologieën en tools. Het is een functie met veel vrijheid, goede arbeidsvoorwaarden én je draagt jouw steentje bij aan de energietransitie. Klinkt dit als iets voor jou? Lees dan verder of solliciteer direct! Wat ga je doen als senior .NET developer? Als senior .NET developer bij Kenter (onderdeel van Alliander) ben je van onschatbare

Bekijk vacature »

TypeScript developer (tot € 6.000, - bruto pe

Functie Om bovenstaande ambities waar te kunnen maken zijn ze op zoek naar een ervaren Typecript developer die niet alleen zichzelf verder ontwikkelt, maar het ook leuk vinden om op termijn meer junior collega’s op pad te helpen. Je zult aan de slag gaan met het migreren van hun bestaande UI in Angular. Maar ook het ontwikkelen van een mobiele app. Hierbij hechten ze veel waarde aan User Experience en kiezen ze duidelijk voor kwaliteit i.p.v. snelheid. Je krijgt dus de ruimte om vanuit gedegen onderzoek te werk te gaan en het borgen van kwaliteit staat hoog in het vaandel.

Bekijk vacature »

Junior PHP Developer

Functieomschrijving Junior PHP Developer gezocht! Voor een opdrachtgever in de regio Gelderland zijn wij op zoek naar een Junior PHP Developer die onderdeel gaat worden van het ontwikkelingsteam van deze organisatie. In deze functie ga jij aan de slag met het schrijven van software voor de aansturing van en het managen van windparken en bijbehorende onderdelen. Hiernaast ga jij je bezighouden met het ontwikkelen, testen en onderhouden van diverse webapplicaties. Het team waarin je komt te werken bestaat uit 3 developers, hierdoor krijg je veel verantwoordelijkheid en de kans om jezelf verder te ontwikkelen. Er wordt echter wel van je

Bekijk vacature »

Back-end Developer

Functieomschrijving Heb jij kort geleden jouw HBO ICT diploma in ontvangst mogen nemen? Of ben je toe aan een nieuwe stap? Voor een softwarebedrijf in regio Oosterhout zijn wij op zoek naar een back-end developer met kennis of ervaring met C# en SQL. Je draagt bij aan de implementatie van aanpassingen, verbeteringen en aanvullingen in de C# based applicaties; Je test de software en ontwikkelt deze door; Je brengt de aanpassingssuggesties van klanten in kaart, om ze vervolgens te analyseren en daarna te concluderen of de aanpassing een verbetering is; Je houdt je bezig met het ontwikkelen van nieuwe functionaliteiten;

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

20/06/2025 22:46:14
 
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
 

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