Code Monkey home page Code Monkey logo

canvas-image-map's Introduction

Image Map in Vue 3

This repo just contains a simple image map component, which takes coordinates from a specified object and maps interact-able areas to the inner image. Not to be confused with an html map element, this method allows for styling of interact-able areas as opposed to using an area map

Making an Image Map

you can generate an image map for free at https://www.image-map.net/

example.mp4

canvas-image-map's People

Contributors

makanamakesstuff avatar

Stargazers

Kittichet Puengreang avatar CofCat avatar DeerInForest avatar KLHamilton avatar  avatar Ismael Costa avatar Veerle Deschepper avatar Denis Zakharov avatar Anatoly Chulkov avatar Jakub Szajna avatar  avatar  avatar Anton Miseika avatar Pierre Baudin avatar eggp avatar  avatar  avatar

Watchers

Hunter avatar  avatar  avatar

canvas-image-map's Issues

how to use href referenced in imageMaps.ts

Hi, i dived in your code but hasn't been able yet to determine how to use the hrefs referenced in the imageMaps.ts file, can you point me in the right direction ? thanks

Create CSS Classes for Cursor

When the user hovers over interact-able areas, the cursor will have a custom class applied, which will dictate the cursor style. By default it will be “pointer”, but will add other classes for cursor appearance on hover events.

Introduce Map Generator

I want to create a simple form that allows me to upload an image, define rect and or poly coordinates on the image(canvas overlay), then return these coordinates in JSON format. This will allow me to easily hardcode and or store this data in a database.

Add Poly Points

Currently the image map component doesn’t map poly point, just rects. Need to allow for poly coordinates

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.