{"id":22021505,"url":"https://github.com/peterbenoit/imageprocessor","last_synced_at":"2025-03-23T10:19:12.910Z","repository":{"id":256028191,"uuid":"854161135","full_name":"peterbenoit/ImageProcessor","owner":"peterbenoit","description":"A simple JavaScript library for handling image manipulation","archived":false,"fork":false,"pushed_at":"2024-09-11T15:17:55.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T16:45:01.001Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peterbenoit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08T14:39:14.000Z","updated_at":"2024-09-11T15:19:34.000Z","dependencies_parsed_at":"2024-09-11T21:34:27.774Z","dependency_job_id":null,"html_url":"https://github.com/peterbenoit/ImageProcessor","commit_stats":null,"previous_names":["peterbenoit/imageprocessor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FImageProcessor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FImageProcessor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FImageProcessor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2FImageProcessor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterbenoit","download_url":"https://codeload.github.com/peterbenoit/ImageProcessor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245084942,"owners_count":20558312,"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-11-30T06:12:21.555Z","updated_at":"2025-03-23T10:19:12.889Z","avatar_url":"https://github.com/peterbenoit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ImageProcessor Library\n\nA lightweight JavaScript library for advanced image processing in the browser. Supports a variety of filters, transformations, and watermarks.\n\n## Features\n\n-   Apply filters like grayscale, sepia, invert, brightness, contrast, blur, saturation, hue rotation, and opacity.\n-   Perform transformations such as rotation, cropping, and resizing.\n-   Add text or image watermarks with customizable positions, repeats, and angles.\n-   Lazy loading, crossorigin, decoding, and referrer policy support.\n-   Event hooks for processing start, completion, and errors.\n-   Supports multiple images and batch processing.\n-   Wrap processed images in customizable HTML elements (e.g., div, section) with specified class lists.\n\n## Getting Started\n\n### Installation\n\nInclude the `ImageProcessor.js` script in your HTML file:\n\n```html\n\u003cscript src=\"path/to/ImageProcessor.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\n#### Basic Usage\n\nTo apply basic filters and transformations:\n\n```javascript\nnew ImageProcessor('https://example.com/image.jpg', {\n    width: 400,\n    height: 300,\n    grayscale: 'grayscale(100%)',\n    brightness: 'brightness(3)',\n    altText: 'Processed image',\n    targetElement: document.getElementById('image-target'),\n});\n```\n\n#### Advanced Usage with Watermark\n\nTo add a watermark to an image:\n\n```javascript\nnew ImageProcessor('https://example.com/image.jpg', {\n    watermark: 'Confidential',\n    watermarkPosition: 'center',\n    watermarkStyle: {\n        fontSize: '20px',\n        fontFamily: 'Arial',\n        color: 'rgba(255, 255, 255, 0.5)',\n    },\n    targetElement: document.getElementById('image-target'),\n});\n```\n\n#### More Examples can be found on CodePen\n\n[ImageProcessor.js on CodePen](https://codepen.io/peterbenoit/pen/XWLOmpj)\n\n### Options\n\n-   **width**: Width of the processed image.\n-   **height**: Height of the processed image.\n-   **cropX, cropY, cropWidth, cropHeight**: Crop dimensions.\n-   **grayscale, sepia, invert**: Image filters.\n-   **brightness, contrast, blur, saturation, hueRotate, opacity**: More image filters.\n-   **rotate**: Rotate the image by a certain degree.\n-   **watermark**: Text or image URL for the watermark.\n-   **watermarkPosition**: Position of the watermark.\n-   **watermarkRepeat**: How the watermark is repeated.\n-   **watermarkAngle**: Angle of watermark text.\n-   **altText**: Alternative text for accessibility.\n-   **loading, crossorigin, decoding, referrerPolicy**: Image loading attributes.\n-   **wrapperTag**: HTML tag used to wrap the processed image (e.g., div, p).\n-   **wrapperClassList**: Class list for the wrapping HTML tag.\n\n### Events\n\n-   **onProcessingStart**: Triggered when image processing starts.\n-   **onProcessed**: Triggered when image processing is complete.\n-   **onError**: Triggered on errors.\n\n### CODING GUIDE\n\nThe [CODING_GUIDE.md](CODING_GUIDE.md) provides comprehensive information on the implementation, and configuration.\n\n### FAQs\n\nSee [FAQ.md](FAQ.md) for more information.\n\n## Contributing\n\nContributions are more than welcome! Please check the [issues](https://github.com/peterbenoit/ImageProcessor/issues) page for open tasks.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Author\n\n[Peter Benoit](https://github.com/peterbenoit)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fimageprocessor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterbenoit%2Fimageprocessor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fimageprocessor/lists"}