{"id":13445931,"url":"https://github.com/rendro/vintageJS","last_synced_at":"2025-03-21T05:31:16.996Z","repository":{"id":58239488,"uuid":"1450644","full_name":"rendro/vintageJS","owner":"rendro","description":"Add a retro/vintage effect to images using the HTML5 canvas element","archived":false,"fork":false,"pushed_at":"2023-10-17T20:41:07.000Z","size":4272,"stargazers_count":841,"open_issues_count":1,"forks_count":116,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-03-20T05:14:54.525Z","etag":null,"topics":["canvas","image-processing","instagram","javascript","retro","vintage"],"latest_commit_sha":null,"homepage":"https://vintagejs.com/","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/rendro.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}},"created_at":"2011-03-07T15:50:31.000Z","updated_at":"2025-03-06T13:54:34.000Z","dependencies_parsed_at":"2024-04-05T00:33:19.216Z","dependency_job_id":"18c975d8-c257-414d-97d6-0e701f124fc6","html_url":"https://github.com/rendro/vintageJS","commit_stats":{"total_commits":85,"total_committers":7,"mean_commits":"12.142857142857142","dds":0.2823529411764706,"last_synced_commit":"c6e5fc0a8259c433bb115fc2e4d8df092f991e56"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2FvintageJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2FvintageJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2FvintageJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rendro%2FvintageJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rendro","download_url":"https://codeload.github.com/rendro/vintageJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244554123,"owners_count":20471173,"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":["canvas","image-processing","instagram","javascript","retro","vintage"],"created_at":"2024-07-31T05:00:42.037Z","updated_at":"2025-03-21T05:31:16.975Z","avatar_url":"https://github.com/rendro.png","language":"JavaScript","readme":"# vintageJS\n\n\u003e Add a retro/vintage effect to images using the HTML5 canvas element.\n\n[![npm](https://img.shields.io/npm/v/vintagejs.svg?style=flat-square)]()\n[![npm](https://img.shields.io/npm/l/vintagejs.svg?style=flat-square)]()\n[![Greenkeeper badge](https://badges.greenkeeper.io/rendro/vintageJS.svg)](https://greenkeeper.io/)\n\n![](header.jpg)\n\n## Installation\n\n```\n$ npm install vintagejs\n```\n\n## How to use\n\n`vintagejs` is a function that takes a source (URL, ImageElement or CanvasElement) and an effect (object with all the options) and returns a Promise that resolves to a result object.\n\n```javascript\nvintagejs('./path/to/picture.jpg', { brightness: 0.2 })\n  .then(res =\u003e res.genImage())\n  .then(img =\u003e document.body.appendChild(img));\n```\n\nThe result object provides the following methods to access the modified image data:\n\n```javascript\n// returns the data url of the updated image. Use it to update the source of an existing image\ngetDataURL(mimeType?: string, quality?: number): string;\n// returns the canvas with the updated image. Use it to draw your changes onto another canvas\ngetCanvas(): HTMLCanvasElement;\n// returns a promise that resolves to an HTMLImageElement of the updated image\ngenImage(mimeType?: string, quality?: number): Promise\u003cHTMLImageElement\u003e;\n```\n\nIf not provided, mimeType defaults to `image/jpeg` and quality defaults to `1`.\n\n### More Examples\n\n```javascript\n// use an image as source and update image with data url\nconst srcEl = document.querySelector('img.myImage');\nvintagejs(srcEl, { brightness: 0.2 })\n  .then(res =\u003e {\n    srcEl.src = res.getDataURL();\n  });\n\n// use a canvas as source and draw result to canvas\nconst srcEl = document.querySelector('canvas.myCanvas');\nconst ctx = srcEl.getContext('2d');\nvintagejs(srcEl, { brightness: 0.2 })\n  .then(res =\u003e {\n    ctx.drawImage(res.getCanvas(), 0, 0, srcEl.width, srcEl.height);\n  });\n```\n\n## Effect options\n\n```javascript\ntype TEffect = {\n  curves: false | TCurve,     // default: false\n  screen: false | TRGBAColor, // default: false\n  saturation: number,         // float between 0 and 1, default: 1\n  vignette: number,           // float between 0 and 1, default: 0\n  lighten: number,            // float between 0 and 1, default: 0\n  viewfinder: false | string, // string must be URL, default: false\n  sepia: boolean,             // default: false\n  gray: boolean,              // default: false\n  brightness: number,         // float between -1 and 1, default: 0\n  contrast: number,           // float between -1 and 1, default: 0\n};\n\n// every channel, r=red, g=green, b=blue serves as a look up table for color mappings\ntype TCurve = {\n  r: Array\u003cUint8\u003e | Uint8ClampedArray, // array of int between 0 and 255, length of array === 256\n  g: Array\u003cUint8\u003e | Uint8ClampedArray, // array of int between 0 and 255, length of array === 256\n  b: Array\u003cUint8\u003e | Uint8ClampedArray, // array of int between 0 and 255, length of array === 256\n};\n\ntype TRGBAColor = {\n  r: Uint8,  // int between 0 and 255\n  g: Uint8,  // int between 0 and 255\n  b: Uint8,  // int between 0 and 255\n  a: number, // float between 0 and 1\n};\n```\n\n### Examples\n\n```javascript\nconst noEffect = {};\n\nconst effect_1 = {\n  brightness: -0.2,\n  contrast: 0.15,\n};\n\nconst effect_2 = {\n  brightness: 0.1,\n  vignette: 0.3,\n  viewfinder: './film-1.jpg',\n  screen: {\n    r: 227,\n    g: 12,\n    b: 169,\n    a: 0.15,\n  },\n};\n```\n\nSee examples folder for more examples.\n\n## Browser support\nCheck support for the canvas element [canisue.com/canvas](http://caniuse.com/canvas).\n\nHigher performance when canvas blend modes are supported [caniuse.com/#feat=canvas-blending](http://caniuse.com/#feat=canvas-blending), but fallbacks are implemented.\n\n## License\n\n[MIT](http://www.opensource.org/licenses/mit-license.php)\n\n## Changelog\n\n### 2.2.0\n* Added true grayscale effect (Thanks @bjornbos for PR #38)\n\n### 2.1.0\n* Add support for strings (URI or base64 encoded data-uri) as a source\n\n### 2.0.0\n* Rewrite from ground up\n* Functional API\n\n### 1.1.5\n* Added \"main\" field to package.json\n\n### 1.1.4\n* Added universal module definition (umd) wrapper\n\n### 1.1.3\n* Added minified versions\n* Fixed same-origin error\n\n### 1.1.2\n* added AngularJS support thanks to [@dpiccone](https://github.com/dpiccone)\n* grunt based build script for all versions\n\n### 1.1.1\n* performance improvements\n* new effect options:\n    * brightness\n    * contrast\n\n### 1.1.0\n* Improved core performance\n\n### 1.0.0\n* Initial release\n","funding_links":[],"categories":["Libraries","🚀 A series of exquisite and compact web page cool effects","JavaScript"],"sub_categories":["Image processing","Image Effect"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendro%2FvintageJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frendro%2FvintageJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendro%2FvintageJS/lists"}