canvas x/y

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Junior PHP ontwikkelaar

Functie Wij hebben onlangs onze eerste collega’s aangenomen, waardoor ons development team momenteel uit 4 personen bestaat. We bouwen onze software op basis van een PHP-framework (wat op zichzelf een Symfony framework is). Qua ontwikkeling focussen wij ons op 3 focus velden; – API-ontwikkeling/ Component Creatie – Implementatie – Framework ontwikkeling; het toevoegen van nieuwe functionaliteit of interne microservices Onze senior software engineer focust zich momenteel op de laatste twee punten, maar wij komen handen te kort op het eerste veld. Daarom zijn wij op zoek naar een enthousiaste junior software engineer die graag de kneepjes van het vak wil

Bekijk vacature »

Senior Front-End Developer

Als Senior Front-End Developer bij Coolblue verbeter je de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Wat doe je als Senior Front-End Developer bij Coolblue? Als Senior Front-end Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Daarnaast ben je trots op je werk en verwelkomt alle feedback. Ook Senior Front-end Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Verbeteren van de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Nadenken

Bekijk vacature »

.NET Developer

Functie omschrijving Ervaren .NET Developer gezocht! Wij zoeken een ervaren .NET developer die aan de slag gaat voor een softwarebedrijf in de regio Rhenen. In deze rol ben jij zowel zelfstandig als in teamverband verantwoordelijk voor het ontwikkelen en verbeteren van bestaande producten. Daarnaast houdt jij je bezig met de nieuwbouw van websites, webapplicaties en mobiele applicaties die zowel intern als extern gebruikt worden. Je werkt hierbij nauw samen met andere developer, productmanagers en product specialisten om mooie producten te creëren. Bedrijfsprofiel Waar kom je te werken? Je komt te werken voor snelgroeiende softwareleverancier en allround dienstverlener. Klanten van deze

Bekijk vacature »

React developer Inhouse cloudplatform

Functie De functie: Als front-end developer kom je te werken naast 2 andere front-end/React developers, waaronder één senior. Een hele mooie kans dus om in korte tijd veel nieuwe kennis en ervaring op te doen. Ze hebben momenteel veel werk hierin en daarom willen ze het team graag uitbreiden. Het is van belang dat je, zeker gezien het vele thuiswerken, in ieder geval al een aantal projecten hebt gedaan in React. Taken waar je aan kunt denken zijn het ontwikkelen van client-applicaties o.b.v. HTML5, React en andere open standaarden. Ook ben je nauw betrokken bij het implementeren van designs o.b.v.

Bekijk vacature »

PHP back-end developer gezocht!

Functie Werk je liever zonder druk en keiharde deadlines maar met de focus op kwaliteit? Dan kom je hier op de juiste plek terecht! In Het team bestaat momenteel uit 12 developers, hiernaast werken er collega’s van front-end, UX maar ook marketing/sales en support. In iedere sprint ontwikkel je samen functionaliteiten met als uitdaging om de klanten de beste gebruikerservaring te bieden. Ze bieden een werkplek waar je jezelf kunt blijven ontwikkelen, en mee te werken aan zowel bestaande als nieuwe mogelijkheden. Eisen • HBO werk- en denkniveau (ze kijken niet naar een papiertje) • Je denkt graag mee over

Bekijk vacature »

Full stack Javascript ontwikkelaar

Functie Benieuwd hoe jouw dag eruit ziet? Je komt binnen rond een uur of 10 en dat start je met de morning call. Dit doen we vanaf het hoofdkantoor of op het lab, ligt eraan welk project je mee bezig bent. Na de call en het verdelen van de tickets ga je met je team aan de slag. Rond een uur of 12 is er een goede lunch en ga je smiddags weer lekker door met je werk. De ene keer maak jij een game voor een groot merk om de interactie tussen product en eindgebruiker te vergroten. De andere

Bekijk vacature »

.NET developer

Functie Als .NET developer start jij in een development team met één Senior .NET developer en één junior .NET developer. Als team zijn jullie verantwoordelijk voor het schrijven van software voor onze toonaangevende Automatiseringssystemen. Jij gaat aan de slag met de onderhoud van de kernsoftware, ondersteund de software van derden door het gebruik van onze webservices en als team zijn jullie verantwoordelijk voor het ontwikkelen van onze backend oplossingen. Wij maken op dit moment veel gebruik van .NET met ASP.NET. Komend kwartaal gaan wij wel gedeeltelijk overstappen naar .NET Core. Verder werken wij ook met SOAP, REST, JSON, HTML5, CSS3

Bekijk vacature »

Medior Java 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 »

Software Developer / .NET / Azure

Dit ga je doen Als Lead .NET Software Developer zal je je bezig houden met: Het vertalen van bedrijfswensen naar een technische roadmap; Uitwerken van nieuwe architectuur / designs; Het team aansturen en motiveren; Toezien op de kwaliteit van de code; Mee ontwikkelen van nieuwe features en applicaties. Hier ga je werken Deze organisatie is op dit momenteel marktleider in het ontwikkelen van productielijnen voor de voedselindustrie en heeft een wereldwijd klantnetwerk. Binnen deze organisatie is het team van software developers dagelijks bezig met het ontwikkelen van maatwerk oplossingen om alle productiemachines aan te sturen, maar ook bedrijf kritische applicaties

Bekijk vacature »

Remote - Front-end Angular developer

Functie The IT team currently consists of the IT Manager, 2 back-end developers, 1 full-stack developer, 1 designer, and a DevOps engineer. They are currently looking for an experienced Front-end developer who will work autonomously and in a disciplined manner, being the only developer working on their Front-end applications at the start. They do have the ambition to find a second developer soon, who you will then be able to supervise. You will be working on the further development of their existing UI in Angular. But also developing a mobile app. They place great value on User Experience and opt

Bekijk vacature »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Front end developer

Functie Het team bestaat uit User Experience designers, Data Scientists en Software Engineers met passie voor hun vak. De consultants en ontwikkelaars werken volgens de Design Thinking methode waarbij de eerste stappen van ontwerp en ontwikkeling zullen samenkomen in een proof of concept. Nadat is vastgesteld dat de oplossing voldoet aan de belangrijkste behoeftes worden producten of services gevalideerd door middel van korte iteraties. Hiermee zorgen ze ervoor dat het werk voldoet aan de technische vereisten en gebruikersbehoefte. Door het inzetten van de nieuwste technologieën die toekomstbestendig zijn weten ze klanten omver te blazen. Ook geven en organiseren ze veel

Bekijk vacature »

Lead developer

Functie Als lead developer wordt jij verantwoordelijk voor een van onze development teams. Samen met de Software Architect bewaak jij de kwaliteit en uitvoering van onze complexe vraagstukken. Daarnaast ben jij verantwoordelijk voor het inschatten, designen en ontwikkelen van middelgrote tot grote veranderingen in de software. Ook coördineer jij het proces rondom complexe technische vraagstukken. Verder bestaat jouw takenpakket uit het volgende: – Het aansturen van jouw development team; – Het begeleiden van Junior Software Engineers; – Het maken van technische analyses m.b.t. nieuwe aanvragen en het tijdsbestek inschatten voor de uitvoering hiervan; – Het uitvoeren van de ontwikkeling van

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 »

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 »
Jan R

Jan R

20/07/2020 10:50:51
Quote Anchor link
Hi,

ik slaag er niet in om de juiste X/Y coördinaten te vinden.
Zoals te zien in de code heb ik al een paar mogelijkheden geprobeerd.

https://www.janr.be/html2canvas/

Met de huidige code werkt het perfect onder edge op local server. Echter via chrome of op een productie server lukt het niet.

Kan iemand eens een kritische blik werpen?

Jan
 
PHP hulp

PHP hulp

15/05/2024 10:53:12
 
Ad Fundum

Ad Fundum

20/07/2020 11:22:23
Quote Anchor link
Wat bedoel je precies met 'de juiste coordinaten'?
 
Jan R

Jan R

20/07/2020 13:40:17
Quote Anchor link
wat zouden xy coördinaten kunnen zijn:)
 
Thomas van den Heuvel

Thomas van den Heuvel

20/07/2020 14:55:05
Quote Anchor link
Waarvan? Je bedoelt waarom de muispointer niet de punt van je "penseel" is in de "screenshot"?

Ik denk dat dit op een of andere manier met schaal te maken heeft.

Probeer maar eens een diagonale lijn te trekken van de linker bovenhoek naar de rechter onderhoek. De lijn start precies op de muispointer, maar naarmate je de rechter onderhoek nadert wordt de afstand tussen de getrokken lijn en de muispointer groter.
 
Jan R

Jan R

20/07/2020 18:01:23
Quote Anchor link
Inderdaad. De X/Y kloppen niet. zoals je ziet in de javascript heb ik al enkele pogingen ondernomen. getMousePos, getMousePos1 en getMousePos2 en dan nog de andere die ik al gewist heb.

De canvas is 800X600 wat ook doorkomt in js. Deze komt niet door als je werkt met css :(
Ik heb al gekeken naar de border ed echter zonder succes. Er zou iets met de schaal kunnen. Ik vind het niet.

Ter herinnering. EXACT dezelfde code, die jullie nu kunnen zien, onder edge 83 werkte lokaal maar niet op productie. Ook een ander resultaat in chrome.

Even ter verduidelijking. De bedoeling is als iemand een fout ziet op de site, hij deze kan kopiëren naar een print-screen aantekeningen maken en dan posten naar de webbeheerder. Het post deel werkt.

1 persoon heeft een foto genomen zonder te bewerken en dan gepost.

Jan

update. Er was blijkbaar een bug in edge 83. Vandaag 84 ontvangen en nu lukt ongeveer alles :)

Aan allen welke meewerkten: BEDANKT

Jan

Toevoeging op 20/07/2020 19:11:21:

Voor wie wilt. Blijft nog een paar weken staan. Misschien zijn er nog geïnteresseerden.
Gewijzigd op 20/07/2020 19:09:35 door Jan R
 
Ad Fundum

Ad Fundum

20/07/2020 21:02:59
Quote Anchor link
Het is zeker een leuk idee. Het zou nog beter zijn als het ook cross-platform zou werken. Op mijn systeem (Linux, KDE Plasma, Firefox ESR) zit er een witrand onder de screenshot, en de schaal van de getekende lijn klopt niet. De X/Y-schaal van de getekende lijn is te groot vanuit de oorsprong, waardoor alles vergroot naar rechts onder getekend wordt. Misschien heeft het te maken met dat ik een 4k-scherm heb?

Afgezien van het issue met de coordinaten gebruik je een grote JS-library html2canvas. Misschien ben je via Google op een draad van SO gekomen (https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots) maar html2canvas heeft vrij veel issues (https://github.com/niklasvh/html2canvas/issues) en het is inmiddels ingehaald door de JavaScript-functie getDisplayMedia(). Zie ook https://www.w3.org/TR/screen-capture en https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia .
getDisplayMedia() wordt ondersteund op alle moderne (desktop) browsers, zie ook https://caniuse.com/#search=getDisplayMedia .

Het zou mooi zijn als we in (vanilla) JS een voorbeeld hebben van het maken, annoteren en opsturen van een screenshot..
 
Jan R

Jan R

21/07/2020 08:37:36
Quote Anchor link
Hi,

De witrand onderaan is logisch. Het scherm bevat dan ook een groot deel wit onderaan. GetDisplayMedia ga ik eens bekijken. Als ik het goed zie/lees met de gebruiker eerst toestemming geven en is dit uitsluitend voor media. Niet voor stilstaand beeld.
Mijn bron: https://html2canvas.hertzen.com/ staat ook vermeld in mijn html.

Jan

Toevoeging op 21/07/2020 19:41:04:

Het begint op iets te trekken
 
Ad Fundum

Ad Fundum

21/07/2020 21:34:45
Quote Anchor link
Het nadeel van html2canvas is dat de rendering van de HTML minder compleet, en niet hetzelfde is, als die van een browser. Het kan daardoor helaas geen generieke oplossing zijn, want hoe complexer een site is, hoe groter de kans dat de screenshot helemaal niet lijkt op de site of webapp. Daarom kwam ik met getDisplayMedia(), omdat je daarmee exact kunt zien wat een browser laat zien. Je kunt er zelf meer mee, zoals (i.c.m. WebRTC) iemand live laten meekijken op de site, dat geeft nog veel meer informatie over wat er fout is.

Overigens is het voorbeeld met html2canvas een geslaagde proof of concept, dat laat zien wat de mogelijkheden zijn.
 
Jan R

Jan R

22/07/2020 07:09:29
Quote Anchor link
Volledig akkoord maar hoe kan ik met getDisplayMedia of een ander commando een screendump maken naar een canvas? Ik vind enkel streamen van media als ik hierop zoek.

Jan
 
Yoop Overmaat

Yoop Overmaat

22/07/2020 10:54:32
Quote Anchor link
De x/y = coordinaten van html5 canvas liggen in de linkerbovenhoek van je canvas.
Misschien dat het zo lukt, zoek eens op screenshot i.p.v. screendump.

Voorbeeld:
Link: https://www.tutorialspoint.com/Can-you-take-a-screenshot-of-the-page-using-HTML5-Canvas
 
Jan R

Jan R

22/07/2020 11:04:16
Quote Anchor link
Laat dat nu dezelfde lib zijn als waarmee ik werk :)
 



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.