canvas x/y

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Medior C# Developer

You'll build modern applications for Coolblue's back office. We have a lot of friends, and they crave well-structured data and user-friendly, task-focused applications. How do I become a Medior C# Developer at Coolblue? You regularly participate in brainstorm sessions about user experience, data, and task flow with the UX Designer, Product Owner, and Data Scientists in your team. Besides that you will create disconnected, highly congruent, and testable code that can easily be maintained and is future-proof. Want to become C# Developer at Coolblue? Read below if the job suits you. You enjoy doing this Working with various types of

Bekijk vacature »

Senior Front-end developer

Functie Als front-end developer ga je aan de slag voor verschillende klanten, waarbij veel rekening wordt gehouden met waar je woont (dit is altijd binnen het uur), en word er gezocht naar een organisatie die past bij jou. Zowel qua persoonlijke ambities als de technische aansluiting. De opdrachten duren gemiddeld 1 à 2 jaar maar dit hangt ook af van je wensen. Je werkt in een teamverband voor een klant en zult nauw samenwerken met zowel eigen collega’s als die bij de klant werkzaam zijn. Ze zijn op zoek naar een technische front-end developer die ruime ervaring heeft in één

Bekijk vacature »

Embedded Developer C++

Functie omschrijving Ben jij op zoek naar een leuke uitdaging als Embedded Developer, zoek dan niet verder! Voor een leuke opdrachtgever in omgeving Rotterdam zijn wij op zoek naar een Embedded Developer die graag met Embedded Devices werkt. Je zult verantwoordelijk worden voor het ontwikkelen en onderhouden van diverse producten. Jouw specialisatie ligt op het vlak van software, hardware en back-end. Dit bedrijf is gespecialiseerd in het ontwerpen van software voor een unieke industrie. Wil jij betrokken worden bij een proces dat loopt van ontwikkeling tot installatie? Waarbij je bezig zult zijn met perfecte systemen die geleverd worden aan binnen

Bekijk vacature »

Medior Mobile Developer iOS Amsterdam

Functie What will you be doing as Mobile Developer? As an iOS app developer you will work in a multidisciplinary team of app developers, web developers and designers. You will work on world-class apps that will be used by thousands of people. There is a lot of room for self-development on a technical and personal level. Together with the rest of the team you develop in the newest techniques and you go for the best quality. We work with Kotlin Multiplatform Mobile to develop hybrid apps and we guarantee quality with peer reviews, unit testing and we use a CI/CD.

Bekijk vacature »

Fullstack Developer

Functieomschrijving Voor een erkende werkgever in regio Etten-Leur zijn wij op zoek naar een Fullstack Developer met PHP/Laravel ervaring. Je gaat aan de slag met het bouwen van maatwerk software voor klanten die actief zijn in een specifieke markt. Als fullstack developer ben je samen met een enthousiast team van 7 collega’s verantwoordelijk voor de ontwikkeling, beheer en innovatie van informatiesystemen voor klanten in een specifieke branche. Verder ondersteun je complexe uitdagingen van klanten. Je brengt hun wensen in kaart en vertaalt deze door naar maatwerk software. Ervaring met Laravel is een must. Om de klant zo goed mogelijk te

Bekijk vacature »

Java Developer

Functieomschrijving Are you an experienced Java Developer who wants to be challenged? Then this is your job! As a Java Developer, you are co-responsible for building custom applications within our extensive IT landscape. Development takes place on both the back-end side (Spring/JEE). Together with the IT department, you are responsible for the daily adjustments and expansions of our IT systems. In addition, you will work in small scrum teams using the Agile methodologies. Besides the realization of our in-house systems, you are responsible for the roll-out of the application (version) as well as the operational support after going live. Team

Bekijk vacature »

Medior/Senior Software Developers gezocht in de Ra

Functie Op dit moment staan er posities open voor de volgende functies: Front-end, Back-End & Fullstack software developer. Als Front-End software developer werk je met JavaScript en de bijbehorende technologieën zoals TypeScript, Angular, React, Vue en Svelte. Als Back-End software developer ben je bezig in NodeJS en doe je dit met behulp van AWS, NoSQL, REST en GraphQL. Je krijgt leuke en uitdagende opdrachten met een gemiddelde duur van anderhalf jaar. Hier werk je in een team met andere IT’ers aan het ontwikkelen en verbeteren van software. Je wordt begeleid door een accountmanager die fungeert als jouw aanspreekpunt. Het team

Bekijk vacature »

.NET developer

Functie Als junior .NET Developer start jij in een team met 15 developers. In het team is er genoeg senioriteit om ervoor te zorgen dat jij de juiste begeleiding krijgt. Jij begint als eerst alle software pakketten en processen eigen te maken. Vervolgens ga jij deze software programmeren, onderhouden en testen. Ook ga jij research doen naar nieuwe mogelijkheden en zoek jij uit hoe je dit kan implementeren. Jullie werken intern op project basis en afhankelijk van het project werken jullie wel of niet iedere ochtend met een standup. 50% van jullie werkzaamheden is maatwerk en de overige 50% is

Bekijk vacature »

E-Identity Developer met Projectleider Kwaliteiten

Functieomschrijving Voor de kamer van koophandel zijn we op zoek naar een E-Identity developer met projectleider kwaliteiten. Voor deze opdracht zoekt KVK een Informatieanalist met Technisch Projectleider en ICT developer kwaliteiten, met kennis van E-identity. We zoeken in de breedte en niet specifiek in de diepte qua skillset. Een Junior Projectmanager, een Junior Informatieanalist, een Junior Developer (full stack), een Junior Designer en een Junior ICT architect ineen, met een sterk gevoel van stakeholder management en planning vaardigheden. Door de internationale setting, én de realisatie van ontsluiting van en naar basisregisters toe zijn wij op zoek naar enige ervaring binnen

Bekijk vacature »

Machine Software Developer

Bij een bedrijf in de machinebouw, regio Roosendaal, zijn we op zoek naar een: Machine Software Developer Waar ga je werken? Onze opdrachtgever is gespecialiseerd in de grondverzetmachines. Al meer dan 50 jaar leveren ze zowel nationaal als internationaal diverse machines. Het is een familiebedrijf met een informele werksfeer. Wat ga je doen? Als Machine Software Developer ben je verantwoordelijk voor: - Je ontwerpt, ontwikkelt en debugt software voor machinebesturingssystemen en complexe landbouwmachines; - Je stelt gebruikersinterfaces op (cabinedisplays); - Op termijn ga je softwareprojecten leiden voor specifieke machines; - Inclusief planning, documentatie en validatie; - Om specificaties te verifiëren

Bekijk vacature »

.NET developer

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

Database ontwikkelaar

Functieomschrijving Wil jij aan gave logistieke softwareprojecten werken en bij een uniek softwarebedrijf in de regio van Tilburg? Wacht niet langer en reageer snel op deze vacature. Als Database ontwikkelaar ga je aan de slag het schrijven van stored procedures en verder uitbouwen van de SQL database. Je werkt in een database team, met allemaal mensen die energie krijgen van software en techniek. Verder krijg je als taak: Optimaliseren en uitbouwen van de MS SQL databases die gebruikt worden; Optimaliseren van query's, waardoor er efficiënter gewerkt kan worden; Je werkt met de technieken T-SQL of PL/SQL; Bij interesse kan je

Bekijk vacature »

.NET developer

Functie Als .NET developer werk jij samen in een multidisciplinair ontwikkel team met 1-2 Senior .NET developers, twee front-end developers, Data Scientists en één UX designer. Als team werken jullie aan het ontwikkelen van een Cloud based applicatie en aan het stabieler maken van deze applicatie. Ook unit testing gaat erg belangrijk worden in jouw nieuwe functie. Samen met de Senior .NET ontwikkelaar wordt jij verantwoordelijk voor het ontwikkelen van de API. Jullie werken met veel data en incidenteel komen er ook data vraagstukken en zullen er wat queries gedraaid moeten worden. Dit betekend dat jij veel gaat werken met

Bekijk vacature »

.NET Developer Azure

Dit ga je doen Het ontwerpen en bouwen van diverse applicaties (C#, ASP.NET, MVC); Het ontwikkelen van Webservices (WCF); Het meewerken aan de transitie naar Azure; Het samenwerken met collega's binnen een Scrumteam en meedenken over de User Stories; Het bouwen van unittesten; Meedenken over nieuwe tooling, ontwikkelingen en technologieën in de markt. Hier ga je werken Je komt te werken bij een organisatie die verantwoordelijk is voor de ontwikkeling van verschillende portalen. Deze portalen worden gebruikt door diverse partijen en jouw taak is om ervoor te zorgen dat deze optimaal functioneren. Je wordt onderdeel van een Scrumteam en werkt

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

12/10/2024 14:42:11
 

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
 

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
 

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.