PHPackages ruelluna/canvas-pointer - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. ruelluna/canvas-pointer ActiveLibrary[Utility & Helpers](/categories/utility) ruelluna/canvas-pointer ======================= A Filament field that allows users to click and point markers on an image. 1.0.6(9mo ago)23961↑1100%8[3 PRs](https://github.com/ruelluna/canvas-pointer/pulls)MITPHPPHP ^8.1CI passing Since Jul 1Pushed 2mo ago1 watchersCompare [ Source](https://github.com/ruelluna/canvas-pointer)[ Packagist](https://packagist.org/packages/ruelluna/canvas-pointer)[ Docs](https://github.com/ruelluna/canvas-pointer)[ GitHub Sponsors](https://github.com/RuelLuna)[ RSS](/packages/ruelluna-canvas-pointer/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (7)Dependencies (13)Versions (11)Used By (0) A Filament field that allows users to click and point to mark references on an image. ===================================================================================== [](#a-filament-field-that-allows-users-to-click-and-point-to-mark-references-on-an-image) [![Latest Version on Packagist](https://camo.githubusercontent.com/031b680dace7fec4c5bf867cef0e1d777c928038c690a1d537878538c2cfa913/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7275656c6c756e612f63616e7661732d706f696e7465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ruelluna/canvas-pointer)[![GitHub Tests Action Status](https://camo.githubusercontent.com/953fad558b190689d80112640617fecfb29d0163d541e45237074eb4b251b738/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7275656c6c756e612f63616e7661732d706f696e7465722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/ruelluna/canvas-pointer/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/b0fd5d569cdf8a14342b75734a17a42c03ea4e5a4942400985871476d26b5d05/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f7275656c6c756e612f63616e7661732d706f696e7465722f6669782d7068702d636f64652d7374796c696e672e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/ruelluna/canvas-pointer/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/f2a3a8ce28bd1e47ba5af38f55a1c6cf9abdf4a0caf91ee7ffbfe199b36c92fa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7275656c6c756e612f63616e7661732d706f696e7465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ruelluna/canvas-pointer) [![](https://raw.githubusercontent.com/ruelluna/canvas-pointer/main/main.jpg)](https://raw.githubusercontent.com/ruelluna/canvas-pointer/main/main.jpg) I have used it for a client that needs visual reprensentations to where the pains are located in the body. What is your use case? This field will produce a base-64 image and automatically convert it to a file stored in your configured storage disk, returning the URL to the image. Installation ------------ [](#installation) You can install the package via composer: ``` composer require ruelluna/canvas-pointer ``` Usage ----- [](#usage) ``` CanvasPointerField::make('body-points') ->pointRadius(15) // default is 5 ->imageUrl('your image source') ->width(800) // required ->height(800) // required ->storageDisk('public') // default is 'public' ->storageDirectory('canvas-pointer') // default is 'canvas-pointer' ->label('Select body parts that are in pain'), ``` ### Storage Configuration [](#storage-configuration) By default, the component saves images to the 'public' disk in the 'canvas-pointer' directory. You can customize these settings using the `storageDisk()` and `storageDirectory()` methods. #### Static Configuration [](#static-configuration) ``` CanvasPointerField::make('body-points') ->storageDisk('s3') // Use Amazon S3 storage ->storageDirectory('images/pointers') // Custom directory path ``` #### Dynamic Configuration [](#dynamic-configuration) Both storage disk and directory can be set dynamically using closures: ``` CanvasPointerField::make('body-points') ->storageDisk(fn () => config('filesystems.default')) // Use the default disk from config ->storageDirectory(function (Get $get) { // Use a different directory based on the user or other form data $userId = $get('user_id'); return "users/{$userId}/pointers"; }) ``` This allows you to customize the storage location based on runtime conditions, such as the current user, tenant, or other form data. ### Image Creation Process [](#image-creation-process) The Canvas Pointer field handles the image creation process automatically: 1. **Canvas Interaction**: When users click on the image, red dots are added to mark specific points. 2. **Base64 Image Generation**: After each interaction, the canvas (including the background image and all marked points) is converted to a base64-encoded image using Konva.js's `toDataURL()` method. 3. **Automatic File Conversion**: When the form is submitted, the component: - Detects that the field value is a base64 image - Removes the base64 prefix (`data:image/png;base64,`) - Decodes the base64 string to binary data - Generates a unique filename using UUID - Saves the image to the configured storage disk and directory - Returns the public URL of the saved file 4. **Database Storage**: Only the image URL is stored in your database, not the large base64 string, which prevents database size issues. Example of the saved image URL: ``` https://yourdomain.com/storage/canvas-pointer/550e8400-e29b-41d4-a716-446655440000.png ``` This process happens automatically - you don't need to write any additional code to handle the conversion from base64 to file URL. Todos ----- [](#todos) - Automatically detect height and width - Table Column Component - Entry Component - `npm` Konva dependency Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Ruel Luna](https://github.com/ruelluna) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 46 — FairBetter than 93% of packages Maintenance75 Regular maintenance activity Popularity29 Limited adoption so far Community15 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 61.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~69 days Recently: every ~103 days Total 7 Last Release 271d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/1f36b7ca408511a362849c31ab6b1f2da4c609373dd827edf33d612e28764be9?d=identicon)[ruelluna](/maintainers/ruelluna) --- Top Contributors [![ruelluna](https://avatars.githubusercontent.com/u/982036?v=4)](https://github.com/ruelluna "ruelluna (22 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (6 commits)")[![HungryBus](https://avatars.githubusercontent.com/u/8342267?v=4)](https://github.com/HungryBus "HungryBus (1 commits)") --- Tags laravelRuelLunacanvas-pointer ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/ruelluna-canvas-pointer/health.svg) ``` [![Health](https://phpackages.com/badges/ruelluna-canvas-pointer/health.svg)](https://phpackages.com/packages/ruelluna-canvas-pointer) ``` ### Alternatives [guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[marcelweidum/filament-expiration-notice Customize the livewire expiration notice 9169.0k4](/packages/marcelweidum-filament-expiration-notice)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle)[outerweb/filament-settings Filament integration for the outerweb/settings package 3690.9k4](/packages/outerweb-filament-settings) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)