Waarom wil dit niet croppen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Full Stack Java ontwikkelaar

Functieomschrijving Voor de politie zijn wij op zoek naar een Full stack Java ontwikkelaar. Als ervaren full stack Java ontwikkelaar binnen de gewenste deadlines meewerken aan de totstandkoming van de gewenste werkzaamheden. Taken Upgraden van GeoServer, SOLR, Oracle Spatial database, Tomcat Migreren Oracle Spatial naar PostgreSQL/PostGIS Migreren SOLR naar ElasticSearch Geografische gegevens op het interne netwerk beschikbaar maken Doorontwikkelen en actualiseren van de geografische services Het up to date brengen van de CI/CD pipeline, samen met medewerkers die verantwoordelijk zijn voor de CI/CD tooling Aanspreekbaar op de solution architectuur en stemt die met collega's in het cluster Geo De opdracht

Bekijk vacature »

.net developer

Hoi! Wij zijn auto.nl en wij verkopen auto's online. je bestelt bij ons een auto net zo makkelijk als een spijkerbroek. En bevalt ie niet? Dan stuur je 'm gewoon weer terug. En dat we dat goed doen bewijst onze hoge klanttevredenheid van een 9,3. Nu maken we de volgende stap bij auto.nl. We starten met fysieke winkels. Online zoeken, offline bekijken. Maar nog altijd, geen gedoe! Gewoon eerlijk, transparant en zonder zorgen een auto kopen.. Maar om dat waar te blijven maken en nóg beter te worden, zoeken we uitbreiding van ons development team. Wat ga je precies doen?

Bekijk vacature »

Belastingdienst - Freelance Senior Cobol Applicati

Startdatum: 01.06.2023 Richttarief: €65,00 - €75,00 Duur van de opdracht: 7 maanden Uren per week: 36 Taal: Nederlands vereist! Gelieve in het Nederlands te solliciteren. Functieomschrijving: In de applicatie ETM zijn nu de inningsvoorzieningen voor ongeveer 25 aangifte- en aanslagmiddelen opgenomen. ETM is een extern aangeschafte service en het huidige contract met leverancier Oracle loopt af op 31-12-2022. Het programma uitfaseren ETM heeft als doel om vervanging te realiseren waarmee alle nu in gebruik zijnde ETM ondersteuning wordt overgenomen in nieuwe Inningsvoorzieningen om de continuïteit van de inningsprocessen te waarborgen. Eén van de inningsvoorzieningen die voor het einde van 31-12-2022

Bekijk vacature »

Front-End React Developer

As a Front-End React Developer you improve the user-experience of our web applications for your colleagues in Coolblue. How do I become a Front-End React Developer at Coolblue? As a Front-End React Developer you are responsible for developing user interface components and implementing them using React.js concepts and workflows. You work with the UX Designer and get energy from coming up with creative solutions and present these within the team. During the day you gather and welcome feedback on your technical and soft skills. Would you like to become a Front-End React Developer at Coolblue? Read below if the job

Bekijk vacature »

Junior Software Developer

Functie omschrijving Wij zijn op zoek naar een Junior Software Developer!? Sta jij aan het begin van jouw loopbaan of heb jij misschien al enige ervaring? Vind jij het daarnaast belangrijk om jezelf constant te kunnen ontwikkelen en uitdagen? Lees dan snel verder! Voor een vooraanstaand softwarehuis in Nieuwegein ben ik op zoek naar een Junior Software Developer. De eigenaar van het bedrijf is ervan bewust dat je als junior nog een hoop kan leren, waardoor je de eerste maanden veel begeleiding en diverse trainingen krijgt. Daarna ga je samen met je collega's aan zowel kleine als grote projecten werken.

Bekijk vacature »

Full stack ontwikkelaar Laravel, Vue.js

Functie Als ontwikkelaar binnen deze organisatie hou jij je voornamelijk met lopende projecten voor de verschillende klanten. Zo bouw je de ene dag aan prijsschifting systemen en de andere dag onderzoek je crawlers en stel je ze zo in dat de data goed binnen komt binnen het systeem. Daarnaast bouw je mee aan dashboards en ben je dus constant bezig met het verbeteren van het platform. Er is een vaste werkwijze, zo werken ze met Trello kaarten en onderverdelen ze deze aan het begin van iedere week onder de developers. Dit wordt door de lead developer gedaan, maar in samenspraak

Bekijk vacature »

Software Programmeur PHP - JAVA

Functie Voor een opdrachtgever in omgeving Zoetermeer zijn wij op zoek naar een ontwikkelaar ter versterking van het huidige developers team. Heb jij altijd al willen werken voor een bedrijf, dat veilige netwerkverbindingen levert, door middel van veilige oplossingen, die door middel van de nieuwste technologieën ontwikkelt zijn? Stop dan nu met zoeken! Hoe kan jouw dag er straks uitzien? Je gaat software en webapplicaties ontwikkelen met behulp van de talen C / C++ / PHP. Je gaat technische klussen uitvoeren op locatie bij klanten. Je onderhoudt contact met de projectleider om er zeker van te zijn dat een projecten

Bekijk vacature »

Software Ontwikkelaar C# .NET

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 Amersfoort 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. Bedrijfsprofiel De organisatie waar je voor gaat werken heeft een onafhankelijk dataplatform ontwikkelt voor de agrarische sector.

Bekijk vacature »

Senior Java Developer

Als Senior Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die 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 voor onze klanten in regio Noordoost zoals DUO, ING, CJIB en Tendernet. Natuurlijk krijg jij de mogelijkheid je verder te certificeren in dit vakgebied. We organiseren regelmatig technische Meetups en doen veel aan kennisdeling. Sogetisten hebben plezier in hun werk en

Bekijk vacature »

Als PHP developer (Symfony) bijdragen aan betere z

Functie Als Medior/Senior PHP developer wordt er een mate van zelfstandigheid verwacht, maar ook dat je goed in een team kunt opereren waar kennis wordt gedeeld en er bijvoorbeeld codereviews plaatsvinden. Kwaliteit staat voorop, mede hierom werken ze bijvoorbeeld zonder echte deadlines in hun sprints. De SaaS-applicatie wordt volledig ontwikkeld in PHP en Symfony. De module bestaat uit een stuk informatie verrijking en intelligentie wat resulteert in een medische check. De logica wordt daarom in de code geïntrigeerd. Je bent onder andere bezig met complexe databases waar meer dan 80.000 medicijnen op verschillende niveaus in staan, die maandelijks worden geactualiseerd.

Bekijk vacature »

Ervaren Full-Stack PHP Developer

Functieomschrijving Gezocht! Ervaren PHP Developer! Voor een organisatie in de regio Harderwijk zoeken wij een ervaren PHP Developer die het IT team van dit bedrijf gaat versterken. We zijn op zoek naar een enthousiaste en breed georiënteerde IT-er die het innovatieve bedrijf nog een stap verder kan brengen. Voor deze functie zoeken wij iemand die communicatief goed is en die zelfstandig problemen op kan lossen. Je werkt samen met een externe ontwikkelpartij en kunt hun dus uitdagen op het geleverde werk. Het schrijven van concepten aan de AI en hardware kant valt onder je verantwoordelijkheden. Het bedrijf noemt zichzelf een

Bekijk vacature »

Lead Fullstack developer

Functie omschrijving Ben jij een leergierige en ambitieuze junior developer met technische skills? Ben jij op zoek naar een werkgever die jouw de volledige vrijheid geeft om jezelf tot een volwaardige senior te ontwikkelen? Wij zijn op zoek naar een full stack developer die zich bezig wil bezig houden met het uitbreiden en verbeteren van de online webshop. Een onderdeel van jouw werkzaamheden is naast het beheren van de webshop ook om de processen en structuren te stroomlijnen. Werkzaamheden Onderhouden van de webshop (denk aan het bijhouden van de voorraad); Nieuwe functies toevoegen aan de product configurator door middel van

Bekijk vacature »

Software Ontwikkelaar .NET te Zaandam

Bedrijfsomschrijving Je komt hier terecht bij een door-en-door softwarebedrijf, waarbinnen meerdere SaaS pakketten worden ontwikkelt voor diverse sectoren. Hierbij kun je denken aan bijvoorbeeld de logistieke en medische branche. Deze organisatie kenmerkt zich door de hoge mate van complexiteit in de applicaties, wat betekent dat jij je hier niet zal gaan vervelen. Integendeel: Jij gaat hier elke dag ontzettend veel leren en je in razend tempo ontwikkelen als C# .Net Developer met focus op back-end. Het team bestaat uit ongeveer 20 personen personen, waarvan het grootste deel zich richt op software development. De sfeer is informeel en professioneel. De producten

Bekijk vacature »

Junior Front end developer Onderwijssoftware

Functie Als Junior front end developer kom jij terecht in een klein, maar hecht team bestaande uit 5 andere developers (waarvan 2 senioren, 2 medior en 1 junior). Met de gezamenlijke missie om “ieder kind te helpen met onze software” wordt er dagelijks gepassioneerd en hard gewerkt aan ons in-house ontwikkeld platform. Deze software is gebaseerd is op AI, machine Learning en wetenschappelijke inzichten. Dagelijks zul jij werken met onze high traffic webapplicatie. We hebben ruim 300.00 gebruikers en meer dan 2 miljard records waar je te maken mee krijgt! Verder zul jij je bezighouden met: – Het ontwikkelen van

Bekijk vacature »

Functioneel Applicatiebeheerder

Wij van CNB zijn op zoek naar een leergierige Functioneel Applicatiebeheerder CNB is de grootste dienstverlener in de markt van bloembollen en vaste planten. In deze markt verricht CNB de volgende diensten: bemiddeling, veilen en het koelen en prepareren van bloembollen. Vanuit ons hoofdkantoor in Lisse werken bijna 100 collega’s dag in dag uit aan de bemiddeling van bloembollen. In Bovenkarspel vindt het koelen en prepareren van de bloembollen plaats. Wij zijn op zoek naar een enthousiaste Functioneel Applicatiebeheerder die naast een applicatie, ook sfeer kan bouwen! Jij: Vindt het leuk om binnen een klein IT-team aan de slag te

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

08/11/2024 23:25:11
 
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.