{"id":26409616,"url":"https://github.com/fentas/canvasfilter","last_synced_at":"2025-03-17T19:35:03.398Z","repository":{"id":18937887,"uuid":"22157519","full_name":"fentas/canvasfilter","owner":"fentas","description":"This library extends the canvas context object (CanvasRenderingContext2D) with image processing filters.","archived":false,"fork":false,"pushed_at":"2014-08-04T18:24:13.000Z","size":396,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T18:08:46.166Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fentas.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}},"created_at":"2014-07-23T15:37:25.000Z","updated_at":"2020-02-03T12:54:07.000Z","dependencies_parsed_at":"2022-08-02T23:15:26.604Z","dependency_job_id":null,"html_url":"https://github.com/fentas/canvasfilter","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fentas%2Fcanvasfilter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fentas%2Fcanvasfilter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fentas%2Fcanvasfilter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fentas%2Fcanvasfilter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fentas","download_url":"https://codeload.github.com/fentas/canvasfilter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244097508,"owners_count":20397623,"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":"2025-03-17T19:35:02.781Z","updated_at":"2025-03-17T19:35:03.385Z","avatar_url":"https://github.com/fentas.png","language":"JavaScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=G8AHNH2A2BN4Y"],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/fentas/canvasfilter.svg?branch=master)](https://travis-ci.org/fentas/canvasfilter)\n\n# canvasfilter.js\nMainly this library extends the canvas context object (CanvasRenderingContext2D)\nwith image processing filters. It aims to make it easy and strait forward to\nuse.\n\n### Inspired by - Based on\nhttps://github.com/kig/canvasfilters\n\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\n\nBig thanks for that.\n\n## Current State\nA lot of filters should be working fine. A couple are missing, though.\nLike [Sobel filter](http://en.wikipedia.org/wiki/Sobel_filter). Due to the\nFloat32 problematic.\n\u003e Note that ImageData values are clamped between 0 and 255, so we need\n\u003e to use a Float32Array for the gradient values because they\n\u003e range between -255 and 255.\n\n### Browser support\nFor the main part it should be working in browsers supporting canvas.\n\nhttp://caniuse.com/#search=canvas\n\nPersonally I tested it on FireFox (31) and Chrome (37 ~ beta).\n\n## Planed in near future\n- [x] Setting up test environment. (e.g. travis-ci, browser testing etc.)\n  - [ ] complete all test cases (/test/*.test.js)\n- [ ] Create examples and demo page.\n- [ ] Of course bug fixing, improvements and extending.\n- [ ] Maybe make it ready for nodejs environment.\n\n## Getting Started\nJust download and use it. Or you can use bower.\n```shell\nbower install fentas/canvasfilter\n```\n\nLast step is to insert it into your website/app.\n```html\n\u003cscript src=\"path/to/canvasfilter/canvasfilter.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\nAs said before the library tries to make it simple as possible.\nFor starters one example.\n```html\n\u003cimg src=\"/picture.jpg\"\u003e\n\u003cscript\u003e\n// turns into canvas object\nvar ctx = document.querySelector('img').toCanvas().getContext('2d');\n// applies grayscale filter and flips the image vertically\nctx.filter.grayscale().flipVertical();\n// and for convenience turn it into an image again\nctx.canvas.toImage();\n\u003c/script\u003e\n```\n\n### CanvasFilter methods\nAll the filters are found within _filter_ attribute (in\n`CanvasRenderingContext2D` object)\n```js\nvar ctx = canvas.getContext('2d');\nctx.filter // \u003c\u003c here is the image processing collection. ~ CanvasFilter\n```\n\n###### Image processing filters.\n- `CanvasFilter *.flipHorizontal()`\n\n\u003e Flips the image horizontally.\n\n- `CanvasFilter *.flipVertical()`\n\n\u003e Flips the image vertically.\n\n- `CanvasFilter *.luminance()`\n- `CanvasFilter *.grayscale()`\n- `CanvasFilter *.grayscaleAvg()`\n- `CanvasFilter *.threshold(threshold, high, low)`\n- `CanvasFilter *.invert()`\n- `CanvasFilter *.erode()`\n- `CanvasFilter *.distortSine()`\n\n\u003e Not working right now. (Performance issue?)\n\n###### Convolution. [?](http://en.wikipedia.org/wiki/Convolution)\n- `CanvasFilter *.convolve(weightsVector, opaque)`\n- `CanvasFilter *.convolveVertical(weightsVector, opaque)`\n- `CanvasFilter *.convolveHorizontal(weightsVector, opaque)`\n- `CanvasFilter *.laplace()`\n\n\u003e This method simply applies the following matrix.\n```Matlab\n[-1,-1,-1,\n -1, 8,-1,\n -1,-1,-1]\n```\n\n- `CanvasFilter *.gaussianBlur()`\n\n###### Blending methods.\nThis enables you to blend two images together.\nFirst call `*.blend(object[, scaling[, above]])`.\n\n  `object`\n\n  \u003e Any image object like\n  \u003e * HTMLImageElement\n  \u003e * HTMLCanvasElement\n  \u003e * CanvasRenderingContext2D\n  \u003e * CanvasFilter\n\n  `scaling` _default: center_\n\n  \u003e The method how the `object` image will overlay the given image.\n  \u003e - **center**\n  \u003e - **stretch**\n  \u003e - **fit** not implemented yet\n\n  `above` _default: false_\n\n  \u003e Whether the given image should be above or below of the other image.\n\nNext there are several methods available how to blend both images together.\n\n- `CanvasFilter *.blend([...]).darken()`\n- `CanvasFilter *.blend([...]).lighten()`\n- `CanvasFilter *.blend([...]).multiply()`\n- `CanvasFilter *.blend([...]).screen()`\n- `CanvasFilter *.blend([...]).add()`\n- `CanvasFilter *.blend([...]).sub()`\n- `CanvasFilter *.blend([...]).difference()`\n\nOne example for this:\n```js\nvar ctx = canvas.getContext('2d');\nctx.filter.blend(document.querySelector('img')).sub();\n```\n\n###### Look Up Table (LUT). [?](http://microscopy.berkeley.edu/courses/dib/sections/03IPII/)\nThis gives the functionality to use LUTs. For this there exists a separate\nobject - `LookUpTable`. In order to work with this following method is given.\n\n- `LookUpTable *.lookUpTable()`\n\nThe LookUpTable object consists of predefined methods and 4 different matrices.\nEach for every color plus one for alpha (r,g,b and a).\n\nThe predefined methods will set all matrices to perform as described:\n\n- `LookUpTable [LookUpTable].invert()`\n- `LookUpTable [LookUpTable].brightnessContrast(brightness, contrast)`\n- `CanvasRenderingContext2D [LookUpTable].apply()`\n\n\u003e This method will apply all matrices to the given image and return the canvas\n\u003e context (CanvasRenderingContext2D).\n\nNow there is also the possibility to set each matrix itself. Each matrix can\nbe access simply like this `ColorMap [LookUpTable].a` for example. This will return\na ColorMap object which is basically a array/vector (of 255 values).\nYou can set each value as you like (e.g. `[LookUpTable].a[42] = 13;`) or use\nthe following methods:\n\n- `LookUpTable [ColorMap].identity()` _is default_\n- `LookUpTable [ColorMap].invert()`\n- `LookUpTable [ColorMap].brightnessContrast(brightness, contrast)`\n\nAt last another example, inverting the green spectrum and applying the result:\n```js\nvar ctx = canvas.getContext('2d'),\n    lut = ctx.filter.lookUpTable();\n\nlut.g.invert().apply()\n//btw. you could resume the chain like: *.filter.flipVertical()\n```\n\n#### The rest\n- `ImageData *.getPixels()`\n\n\u003e Returns simply the complete image data of the canvas object.\n\n- `*.getBilinearSample(x, y, px)`\n\n\u003e More info: http://en.wikipedia.org/wiki/Bilinear_filtering\n\n### Other useful extensions\nThere are some extension to some of the HTML dom objects to make the\nworkflow more convenient.\n\n#### HTMLImageElement\n- `HTMLCanvasElement *.toCanvas([keep, [complete]])`\n- `HTMLCanvasElement *.toCanvas([complete])`\n\n\u003e Converts _img_ to _canvas_ with the image data.\n\n  `keep` _default: false_\n\n  \u003e If *true* img tag will not be replace instead it just returns the canvas\n  \u003e tag/object.\n\n  `complete` _default: funcion() {}_\n\n  \u003e Use this if you are not sure if the given image is not completely loaded.\n  \u003e If the image is __not loaded__ this method will __return null__ because\n  \u003e there is nothing to replace. The scope of the function will point to the\n  \u003e created canvas object (`this instanceof HTMLCanvasElement`).\n  ```js\n  document.querySelector('img').toCanvas(function() {\n    // makes sure image is completely loaded\n    this.filter.grayscale();\n  }\n  ```\n\n#### HTMLCanvasElement\n- `HTMLImageElement *.toImage([keep, [type, [args]]])`\n\n\u003e Converts _canvas_ to _image_ with canvas image data. Basically it uses canvas\n\u003e image data url.\n\n  `keep` _default: false_\n\n  \u003e If *true* canvas tag will not be replaced instead it just returns the img\n  \u003e tag/object\n\n  `type` _default: image/png_\n\n  \u003e More info:\n  \u003e https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#toDataURL\n\n- `HTMLCanvasElement *.cloneNode([deepClone, [context]])`\n\n\u003e This extends the given `cloneNode`.\n\n  `deepClone` _default: false_\n\n  \u003e If *true* it clones also the old image data instead of cloning only the\n  \u003e canvas element.\n\n  `context` _default: '2d'_\n\n  \u003e What kind of context should be cloned. At the moment only '2d' is supported.\n\n#### CanvasRenderingContext2D\n- `CanvasRenderingContext2D *.clone()`\n\n\u003e Clones the given canvas context. E.g. nice to have for blending methods.\n```js\nvar ctx = document.querySelector('img').toCanvas().getContext('2d');\n// applies grayscale filter and flips the image vertically\ncanvas.filter.blend(ctx.clone().filter.grayscale().flipVertical()).darken();\n```\n\n- `CanvasRenderingContext2D *.restore()`\n\n\u003e Restores the image data to its original data.\n\n## Side notes\nIf you plan to tinker around with images stored somewhere other then your server\nbe aware that this could resolve into following error:\n\n\u003e SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.\n\nIf you have access to this particular server you could solve this\n[like this](http://stackoverflow.com/questions/9972049/cross-origin-data-in-html5-canvas).\n\n## Donations\nPlease help me to finance my every cup of tea. Every coin is appreciated.\n\n```\nSick of tea? That’s like being sick of *breathing*! - Uncle Iroh\n```\n\n`197EypPopXtDPFK6rEbCw6XDEaxjTKP58S` -- bitcoin [?](http://en.wikipedia.org/wiki/Bitcoin)\n\n[ -- paypal](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=G8AHNH2A2BN4Y)\n\n[Or just `flattr`  me.](https://flattr.com/submit/auto?user_id=jguth\u0026url=https://github.com/fentas)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffentas%2Fcanvasfilter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffentas%2Fcanvasfilter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffentas%2Fcanvasfilter/lists"}