{"id":17082312,"url":"https://github.com/viobui/ngx-imageviewer","last_synced_at":"2026-05-21T12:30:18.109Z","repository":{"id":257813392,"uuid":"863964779","full_name":"viobui/ngx-imageviewer","owner":"viobui","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-08T06:47:34.000Z","size":16512,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-14T13:01:52.376Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/viobui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-27T08:39:00.000Z","updated_at":"2024-10-09T03:47:14.000Z","dependencies_parsed_at":"2024-10-14T13:05:50.863Z","dependency_job_id":null,"html_url":"https://github.com/viobui/ngx-imageviewer","commit_stats":null,"previous_names":["viobui/ngx-imageviewer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viobui%2Fngx-imageviewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viobui%2Fngx-imageviewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viobui%2Fngx-imageviewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viobui%2Fngx-imageviewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viobui","download_url":"https://codeload.github.com/viobui/ngx-imageviewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240131743,"owners_count":19752725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T13:00:25.671Z","updated_at":"2026-05-21T12:30:18.075Z","avatar_url":"https://github.com/viobui.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Oct 12, 2024](/content/2024/10/12/README.md)","Viewers"],"readme":"# Angular 18 - Canvas Image/PDF Viewer\n\n[![travis build](https://travis-ci.org/hallysonh/ngx-imageviewer.svg?branch=master)](https://travis-ci.org/hallysonh/ngx-imageviewer)\n[![Greenkeeper badge](https://badges.greenkeeper.io/hallysonh/ngx-imageviewer.svg)](https://greenkeeper.io/)\n[![version](https://img.shields.io/npm/v/@hallysonh/ngx-imageviewer.svg)](http://npm.im/@hallysonh/ngx-imageviewer)\n[![MIT License](https://img.shields.io/github/license/hallysonh/ngx-imageviewer.svg)](https://opensource.org/licenses/MIT)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\nThis project generate a image/pdf viewer using canvas.\n\n## Features\n\n- Configurable\n- Resizeble component\n- Supports JPEG, PNG, GIF and **PDF**\n- Support File Objects\n- Avaliable actions:\n  - **Rotate**\n  - **Zoom**\n  - Reset to maximize size\n  - Free movable\n  - Change page (available just for PDF files)\n\n## Demo\n\nAccess a demo [here](https://hallysonh.github.io/ngx-imageviewer/) or download this project and execute: `yarn \u0026\u0026 yarn start` or `npm install \u0026\u0026 npm run start` to self server it.\n\n## Install\n\nRun `yarn add @hallysonh/ngx-imageviewer hammerjs` to install it and its dependency.\n\n\u003e hammerjs is currently mandatory, but it will be optional in a future release.\n\n## Icon Font\n\nYou can use any icon font to render the button's icons. However, the default icon font is the Google's Material Icons. To use them you can just add the follow line to your index.html:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" /\u003e\n```\n\nOptionaly, you can also install the font library via npm or yarn.\n\n\u003e when using another icon font, you should provide a config object with the button icon mapping\n\n## Basic Usage\n\nAfter import the module `ImageViewerModule`:\n\n```typescript\nimport { ImageViewerModule } from '@hallysonh/ngx-imageviewer';\n\n@NgModule({\n  imports: [ImageViewerModule],\n})\nexport class AppModule {}\n```\n\nUse the follow code on your html:\n\n```html\n\u003cngx-imageviewer [src]=\"imageSrc\"\u003e\u003c/ngx-imageviewer\u003e\n```\n\nOptionaly, you can provide the fields `width` and `height`. If you omit those values, the width and height in the config object will be used.\n\n## Add PDF Support\n\nTo add PDF rendering support, you must first include `pdfjs` by running `yarn add pdfjs-dist@2.16.105` and add its reference in your `angular.json` file, like below:\n\n```json\n{\n  ...\n  \"scripts\": [\n    {\n      \"input\": \"node_modules/pdfjs-dist/build/pdf.min.js\"\n    }, {\n      \"input\": \"node_modules/pdfjs-dist/build/pdf.worker.min.js\"\n    }\n  ],\n  ...\n}\n```\n\n## Custom Configuration\n\nOptionaly, you can provide a custom configuration like below:\n\n```typescript\nimport { IMAGEVIEWER_CONFIG, ImageViewerConfig } from '@hallysonh/ngx-imageviewer';\n...\nconst MY_IMAGEVIEWER_CONFIG: ImageViewerConfig = {\n  buttonStyle: {\n    bgStyle: '#B71C1C' // custom container's background style\n  }\n};\n...\n@Component({\n  ...\n  providers: [\n    {\n      provide: IMAGEVIEWER_CONFIG,\n      useValue: MY_IMAGEVIEWER_CONFIG\n    }\n  ]\n  ...\n})\n...\n```\n\nThe default configuration available is:\n\n```typescript\nexport const IMAGEVIEWER_CONFIG_DEFAULT: ImageViewerConfig = {\n  width: 800, // component default width\n  height: 600, // component default height\n  bgStyle: '#ECEFF1', // component background style\n  scaleStep: 0.1, // zoom scale step (using the zoom in/out buttons)\n  rotateStepper: false, // touch rotate should rotate only 90 to 90 degrees\n  loadingMessage: 'Loading...',\n  buttonStyle: {\n    iconFontFamily: 'Material Icons', // font used to render the button icons\n    alpha: 0.5, // buttons' transparence value\n    hoverAlpha: 0.7, // buttons' transparence value when mouse is over\n    bgStyle: '#000000', //  buttons' background style\n    iconStyle: '#ffffff', // buttons' icon colors\n    borderStyle: '#000000', // buttons' border style\n    borderWidth: 0, // buttons' border width (0 == disabled)\n  },\n  tooltips: {\n    enabled: true, // enable or disable tooltips for buttons\n    bgStyle: '#000000', // tooltip background style\n    bgAlpha: 0.5, // tooltip background transparence\n    textStyle: '#ffffff', // tooltip's text style\n    textAlpha: 0.9, // tooltip's text transparence\n    padding: 15, // tooltip padding\n    radius: 20, // tooltip border radius\n  },\n  zoomOutButton: {\n    // zoomOut button config\n    icon: 'zoom_out', // icon text\n    tooltip: 'Zoom out', // button tooltip\n    sortId: 0, // number used to determine the order of the buttons\n    show: true, // used to show/hide the button\n  },\n\n  // shorter button configuration style\n  nextPageButton: createButtonConfig('navigate_next', 'Next page', 0),\n  beforePageButton: createButtonConfig('navigate_before', 'Previous page', 1),\n  zoomInButton: createButtonConfig('zoom_in', 'Zoom in', 1),\n  rotateLeftButton: createButtonConfig('rotate_left', 'Rotate left', 2),\n  rotateRightButton: createButtonConfig('rotate_right', 'Rotate right', 3),\n  resetButton: createButtonConfig('autorenew', 'Reset', 4),\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviobui%2Fngx-imageviewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviobui%2Fngx-imageviewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviobui%2Fngx-imageviewer/lists"}