Waarom wil dit niet croppen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Low code Developer

Dit ga je doen Je richt je op het doorontwikkelen van bestaande applicaties en het geheel van scratch af aan opzetten van nieuwe applicaties binnen een low code platform; Je beoordeelt technisch ontwerpen en maakt de vertaalslag naar de technische oplossingen binnen het platform; Je voert testwerkzaamheden uit; Je adviseert de organisatie op jouw vakgebied; Je schakelt met business analisten en de architect om tot mooie oplossingen te komen; Je lost bugs op en denkt mee over een structurele oplossing. Hier ga je werken Het gaat om een bekend internationaal handelsbedrijf met ruim 800 medewerkers, verdeeld over verschillende deelbedrijven. Deze

Bekijk vacature »

Cobol Developer

Dit ga je doen Als Cobol Ontwikkelaar zal je gaan meebouwen aan een onderdeel van het backend systeem waarbij je het functionele ontwerp vertaald naar een technische oplossing die geïntegreerd kan worden in de huidige omgeving. Je zorgt ervoor dat de bedrijfsprocessen op een efficiënte manier worden uitgevoerd en werkt proactief aan het verbeteren hiervan. Samen met jouw collega’s reviewen jullie elkaars code en test je je eigen code. Je werkt nauw samen met andere ontwikkelaars, testers en functioneel ontwerpers. Taken pakket: Beheren en doorontwikkelen van de bestaande omgeving; Vertalen van een functionele vragen naar een technische oplossing; Doorvoeren van

Bekijk vacature »

PHP Developer

Functie Middels Scrum en sprints bouw jij in deze functie mee aan complexe webapplicaties en ons SaaS platform. Hierbij hoort ook architectuur tot een van je taken. Daarnaast ben je één van de leden van het Scrum team. Dat betekent dat je naast je kerntaken ook in contact staat met de product owner. Oftewel, je bent bij het gehele ontwikkelproces betrokken. Tools die hierbij gebruikt worden zijn o.a. PHP, Symfony en Git. Eisen • Minimaal HBO werk- en denkniveau • Minimaal 3 jaar aantoonbare ervaring met PHP • Kennis en ervaring Symfony (Laravel is pré) & Lando • Kennis van

Bekijk vacature »

PHP Developer

Dit ga je doen Ontwikkelen, implementeren en testen van PHP-oplossingen en Apps voor klanten en bedrijfsprocessen; Opstellen van requirements en uitwerken van de oplossingen; Testen van software en borgen van een soepele overdracht, inclusief documentatie; Proactief adviseren vanuit eigen expertisegebied over ontwikkelingen en verbeterpunten in technische toepassingen en processen binnen de organisatie. Hier ga je werken De organisatie is een ambitieuze en vooruitstrevende speler in de markt in de regio Rotterdam. Ze zijn de snelst groeiende in hun branche. Met een excellent aanbod en service willen zij de beste keuze zijn voor hun bestaande en nieuwe klanten. Dit alles doen

Bekijk vacature »

Developer

Functie omschrijving Gaat jouw hart sneller kloppen van software developen in C#.NET? Voor een softwarebedrijf in regio Den Bosch zijn wij op zoek naar een C# programmeur. Lees snel verder! Wat ga je doen? Je gaat werken met C# en ASP.NET MVC Framework om onder meer webapplicaties, webshops en websites te ontwikkelen. Je optimaliseert de bestaande software en helpt mee aan het automatiseren van bedrijfsprocessen. Je gaat samen met je collega's de juiste oplossing op basis van de wensen van de klanten uitwerken tot een mooi product. Bedrijfsprofiel Het ontwikkelen van softwareoplossingen en kantoorautomatiseringen is waar dit bedrijf voor staat.

Bekijk vacature »

Senior Front-end Developer

Wordt jij de nieuwe Front end specialist / developer? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Onze klantenkring is groot en divers, dat vraagt om flexibiliteit van jou. Tegelijkertijd betekent dit dagelijks nieuwe dingen leren én dat geen werkdag hetzelfde is. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling waarbij iedereen welkom is, zowel binnen als

Bekijk vacature »

C# .NET Software Ontwikkelaar

Functie omschrijving C# .NET Developer gezocht. Ben jij een full stack developer die op zoek is naar een nieuwe uitdaging binnen een leuk snel groeiend bedrijf? Lees dan snel verder! Wij zijn op zoek naar een Developer met ervaring op het gebied van .NET die een organisatie in de regio Arnhem gaat versterken. Jij gaat je binnen dit bedrijf vooral bezighouden met het verbeteren van de functionaliteiten van hun dataplatform. Samen met andere ontwikkelaars denk je mee in oplossingsrichtingen, architectuur en nieuwe technologieën. Als C# .NET Developer binnen dit bedrijf houd je je niet alleen bezig met het verbeteren van

Bekijk vacature »

Java developer - procesoptimalisatie (Inhouse)

Functie Wat ga je doen als Java developer? Jij als back end developer hebt al enige ervaring opgedaan in jouw vakgebied. Voornamelijk het werken met Java en Spring spreekt jou aan. Jij wordt samen met je collega developers in het team verantwoordelijk voor de gehele back end van de applicatie. Hierdoor heb jij veel zelfstandigheid in je rol en zul je ook zelf beslissingen samen met de PO maken. Er wordt gewerkt volgens de SCRUM methodiek, om zo structuur te creëren in de werkzaamheden. Binnen de 2-wekelijkse sprints pak jij je taken op die samen met de PO afgestemd zijn.

Bekijk vacature »

Developer Full Stack

Functie omschrijving Developer gezocht! Ben jij een enthousiaste developer die graag wil bijdragen aan ontwikkelingen binnen een mooie organisatie? Solliciteer dan snel. Wij zijn op zoek naar een Full Stack Developer uit de regio Nijkerk die gaat bijdragen aan het door ontwikkelen, onderhouden en optimaliseren van een SaaS applicatie. Je moet beschikken over beheersing van zowel de Nederlandse als Engelse taal aangezien je samen met de klant gaat werken. Bedrijfsprofiel Je komt te werken binnen een echt familiebedrijf dat al sinds 1925 actief is binnen de FMCG branche. Het bedrijf heeft 40 medewerkers en er heerst een platte communicatiestructuur waarbij

Bekijk vacature »

ERP Developer fleet managementsysteem

Wat ga je doen als ERP Developer fleet managementsysteem? Als ERP developer speel jij een belangrijke rol bij het doorvoeren van wijzigingen en verbeteringen binnen het fleet managementsysteem. Jouw expertise op het gebied van ERP systemen stelt jou in staat om de applicatie optimaal te laten functioneren en te blijven ontwikkelen. Als lid van het IT-team werk je nauw samen met andere developers en het business team om het fleet managementsysteem te integreren met andere systemen. Je bent verantwoordelijk voor het ontwikkelen van nieuwe functionaliteiten en het implementeren van verbeteringen op basis van de wensen en eisen van onze klanten.

Bekijk vacature »

Back-end developer

Dit ga je doen Development d.m.v. XQuery, JSON/XML en REST API's; Ontwikkelen aan een tof en complex zorgplatform; Koppelingen maken met de NoSQL database; Testen en documenteren van de ontwikkelde functionaliteiten; Samenwerking met andere front- en back-end ontwikkelaars. Hier ga je werken Voor een vooruitstrevende organisatie binnen de zorg in Den Haag zijn wij opzoek naar een Back-end Developer die ervaring heeft met o.a.XQuery en Vue.JS of daarin graag zou willen ontwikkelen. Je zal ontwikkelen aan een tof en complex zorgplatform en koppelingen maken met de NoSQL database. Ook het testen en documenteren van de ontwikkelde functionaliteiten behoort tot jouw

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 »

.NET Developer

Dit ga je doen Programmeren in .NET, Javascript & C# en ontwikkelen in Web Services, Windows Services en MS SQL Server; Zelfstandig verbanden maken Analyseren, testen, bugs fixen, reviewen en rapporteren; Juiste prioriteiten stellen en verantwoordelijkheid nemen; Op architectuur niveau meedenken; Af en toe klanten bezoeken. Hier ga je werken Voor onze relatie zijn wij opzoek naar een .NET ontwikkelaar met minimaal 3 jaar werkervaring. Je komt te werken in een groeiend bedrijf met betrokken collega's die zorgen voor een familiaire sfeer op de werkvloer. Als .NET ontwikkelaar word jij vanaf de eerste werkdag betrokken bij het gehele ontwikkelproces. De

Bekijk vacature »

.NET Software Developer

Dit ga je doen Als .NET Software Developer zul jij je voornamelijk bezig houden met: Het van scratch af aan bouwen van applicaties (.NET, 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 .NET Software Developer en gaat je focussen op het bedenken, ontwikkelen en testen van maatwerkapplicaties in voornamelijk C#. Dit ga je doen bij een grote, internationale

Bekijk vacature »

Back End Developer

As a Back End developer at KUBUS you will be developing the (web) application and services of BIMcollab. You have a focus on the back end of our software, for which we mainly work with C# and .NET. We use a full-stack approach, which means that in addition to the back-end, you will also help with other parts of the code. As a software company, KUBUS is in a unique position. We build our own products that are used by tens of thousands of users worldwide. Our company is just the right size: big enough to make a real impact

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

10/06/2023 00:32:01
 
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.