n-peugnet / image-map-creator Goto Github PK
View Code? Open in Web Editor NEWA javascript tool to create image map that you can export in HTML or SVG
Home Page: https://n-peugnet.github.io/image-map-creator/
License: MIT License
A javascript tool to create image map that you can export in HTML or SVG
Home Page: https://n-peugnet.github.io/image-map-creator/
License: MIT License
Once and for all
Maybe adjust the sensitivity depending on browsers.
https://github.com/webpro/release-it
mais bon trkl quoi
Hi,
It's possible to integrate this in a HTMl page, load the image via JS or HTML/PHP, and the get the zones ouput via JS to save in a database? This is, remove the EXPORT buttons and do it via JS ?
Create an abstract Tool class and a class for each tool that extends it.
I will need to take a deep look at how deploying on npm works
Maybe one day...
I want to use this code in a program of mine, but instead of having the users choose the image they want to use I want to assign an image from another separate program on page load. I've been finding it troublesome to find in which line the this program gets the image. Is there an easy way to do it?
Possible to give names to poligns and display the name inside the poligns ?
Need to have some visual feedback for all poligns...
This is an example, click one point, it will create a "rectangle".
Some times, Users do not know that they have created many invisible rectangles.
It could be useful maybe
Just a happy user ❤️, please close.
I was searching the web on a way to quickly get coordinates and I landed here. Works as expected, beautiful! Thank you.
Happy 2024 btw!
With the following inputs:
right click
I followed the integration steps, but get this error "ReferenceError: p5 is not defined", my project is based on "react": "^16.13.0"
Hello Nicolas,
I really like your lib and want to use it in an own software product. Because of that I need some additional functioality:
Have I to modyfy the ts-sources and build the js file or is there a way to do that easier (callback, configuration?
I tried (with no success - no error messages but also no image in the canvas) for the first point, using your demo:
var canvas = document.getElementById('defaultCanvas0');
canvas.removeAttribute("title");
var ctx = canvas.getContext('2d');
var img1 = new Image();
img1.onload = function () {
ctx.drawImage(img1, 0, 0);
};
img1.src = '../media/25777/xlayout(999).jpg';
I want to provide the possibility that users can define areas of a floor plan (in the backend) to provide jumps to detail informations in the frontend.
Would You be so kind to give me some hints?
Kind regards and thanks in advance
Knut
I need to translate the text of the various buttons "Undo", "Redo", "Delete", "Generate Html", "Generate Svg", "Save", etc and hide some of them. How could I override the private configuration method for this and configure it to my liking?
On the other hand, would it be possible to show the id or the title of the selected area within the polygon, circle, rectangle, etc.?
Is it possible to make some like five px units, so when drawing area selected pixels will be rounded to the nearest fives.
Just where is that function located ?
This is my first steps with .js , and sorry if it was silly question.
Thank you in advance.
To track errors happening from the deployed app
To reproduce:
Call new imageMapCreator("div-1")
after document is ready (e.g. setTimeout 1000ms or by button click)
It will throw an Error
p5.image-map-creator.ts?c85a:138 Uncaught TypeError: Cannot read property 'createCanvas' of undefined
at imageMapCreator.setup (p5.image-map-creator.ts?c85a:138)
at p5.<anonymous> (p5.js:46215)
at p5.<anonymous> (p5.js:46150)
at new p5 (p5.js:46434)
at new imageMapCreator (p5.image-map-creator.ts?c85a:113)
at index.html:32
It is caused by p5 immediately calling p5.setup before new p5()
constructor completes (if document has been loaded)
Additional information:
Here is the plugin:
https://github.com/release-it/conventional-changelog
I will use Angular conventions, just need not to forget to add the scope to the type and the footer for breaking changes
Maybe add a prettier conf to the project
E.g. add a squareDist function without the Math lib dependency.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.