{"id":13565780,"url":"https://github.com/timotgl/canvasfilters","last_synced_at":"2025-04-03T23:30:33.792Z","repository":{"id":24832795,"uuid":"28247465","full_name":"timotgl/canvasfilters","owner":"timotgl","description":"Canvas image filters","archived":false,"fork":true,"pushed_at":"2014-12-20T19:26:44.000Z","size":232,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-11-04T19:42:10.983Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://fhtr.org/canvasfilters","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"kig/canvasfilters","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timotgl.png","metadata":{"files":{"readme":"README","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}},"created_at":"2014-12-19T21:44:16.000Z","updated_at":"2021-12-12T01:50:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/timotgl/canvasfilters","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timotgl%2Fcanvasfilters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timotgl%2Fcanvasfilters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timotgl%2Fcanvasfilters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timotgl%2Fcanvasfilters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timotgl","download_url":"https://codeload.github.com/timotgl/canvasfilters/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247097584,"owners_count":20883121,"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-08-01T13:01:55.340Z","updated_at":"2025-04-03T23:30:33.505Z","avatar_url":"https://github.com/timotgl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Canvas filters\n--------------\n\nThis library implements a few image processing filters using the canvas element.\n\nThe filters operate on ImageData objects. The filters do not modify the\nsource ImageData.\n\nBased on http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nSmoke tests online at http://fhtr.org/canvasfilters/\n\nLICENSE\n-------\nMIT\n\nAPI Documentation\n-----------------\n\nFilters : {\n\n\n  //\n  // Convenience functions\n  //\n\n  // filterImage applies a filter function to an image or canvas element.\n  // Arguments from the third onwards are passed as extra arguments to the filter function.\n  ImageData filterImage(Function filter, Image_or_Canvas image, Filter_arguments var_args, ...)\n\n  // getPixels returns the ImageData object for an image or a canvas element.\n  ImageData getPixels(Image_or_Canvas img)\n\n  // toCanvas returns a new canvas filled with the given ImageData object.\n  Canvas toCanvas(ImageData pixels)\n\n  // getCanvas creates a canvas of the wanted dimensions\n  Canvas getCanvas(int width, int height)\n\n  // createImageData creates an ImageData object of the wanted dimensions\n  ImageData createImageData(int width, int height)\n\n  // createImageData creates an ImageData-like object backed by a Float32Array\n  // of the wanted dimensions\n  ImageDataFloat32 createImageDataFloat32(int width, int height)\n\n  // bilinearSample bilinearly samples the image at the given coordinates.\n  // The result is computed by linear blending of the four pixels around x,y.\n  [r,g,b,a] bilinearSample(ImageData pixels, float x, float y)\n\n  //\n  // Distort filters\n  //\n\n  // identity returns a copy of the ImageData\n  ImageData identity(ImageData pixels)\n\n  // horizontalFlip flips the image left-right\n  ImageData horizontalFlip(ImageData pixels)\n\n  // verticalFlip flips the image upside down\n  ImageData verticalFlip(ImageData pixels)\n\n  // distortSine distorts the image by pinching / punching it by the given amount.\n  // The distort amounts should be between -0.5 and 0.5.\n  ImageData distortSine(ImageData pixels, float xAmount, float yAmount)\n\n\n  //\n  // Color filters\n  //\n\n  // luminance converts the image to grayscale using the CIE luminance\n  // (0.2126*r + 0.7152*g + 0.0722*b)\n  ImageData luminance(ImageData pixels)\n\n  // grayscale converts the image to grayscale using\n  // (0.3*r + 0.59*g + 0.11*b)\n  ImageData grayscale(ImageData pixels)\n\n  // grayscaleAvg converts the image to grayscale using\n  // (r+g+b) / 3\n  ImageData grayscaleAvg(ImageData pixels)\n\n  // threshold converts the image to a two-color image with\n  // pixels brighter than or equal to the threshold value rendered white and\n  // pixels darker than the threshold rendered black\n  // The filter uses grayscale to compute the value of a pixel.\n  // (0.3*r + 0.59*g + 0.11*b)\n  ImageData threshold(ImageData pixels, int threshold)\n\n  // invert inverts the RGB channels of the image.\n  // The inverted version of a pixel is [255-r, 255-g, 255-b, a]\n  ImageData invert(ImageData pixels)\n\n  // invert inverts the RGB channels of the image.\n  // The inverted version of a pixel is [255-r, 255-g, 255-b, a]\n  ImageData invert(ImageData pixels)\n\n  // brightnessContrast adjusts the brightness and contrast of the image.\n  // The brightness value ranges between -1 .. 1, with 0 being neutral.\n  // The contrast value ranges between 0 .. 127, with 1 being neutral.\n  ImageData brightnessContrast(ImageData pixels, float brightness, float contrast)\n\n  // applyLUT applies a color lookup table to the image.\n  // The lookup table is an object of form\n  // {r:Uint8[256], g:Uint8[256], b:Uint8[256], a:Uint8[256]}\n  // Result pixel values are calculated by looking up the current value from\n  // the corresponding lookup table: [lut.r[r], lut.g[g], lut.b[b], lut.a[a]]\n  ImageData applyLUT(ImageData pixels, LookUpTable lut)\n\n  //\n  // Convolution filters\n  //\n\n  // convolve convolves the image using the weights array as a square\n  // row-major convolution matrix.\n  // If the opaque argument is set to true the result image will have\n  // an opaque alpha channel.\n  ImageData convolve(ImageData pixels, Array weights, bool opaque)\n\n  // horizontalConvolve convolves the image using a horizontal weights vector.\n  // If the opaque argument is set to true the result image will have\n  // an opaque alpha channel.\n  ImageData horizontalConvolve(ImageData pixels, Array weights, bool opaque)\n\n  // verticalConvolve convolves the image using a vertical weights vector.\n  // If the opaque argument is set to true the result image will have\n  // an opaque alpha channel.\n  ImageData verticalConvolve(ImageData pixels, Array weights, bool opaque)\n\n  // separableConvolve convolves the image using vertically and horizontally\n  // using the supplied vectors. Faster than convolve for separable kernels.\n  ImageData separableConvolve(ImageData pixels,\n                              Array horizWeights,\n                              Array vertWeights,\n                              bool opaque)\n\n  // convolveFloat32 is a version of convolve that operates on ImageData-like\n  // objects with a Float32Array storing the pixels\n  // {width:int, height:int, data:Float32Array}.\n  // Useful when you need a high value range or negative values in pixels.\n  ImageDataFloat32 convolveFloat32(ImageData pixels, Array weights, bool opaque)\n\n  // horizontalConvolveFloat32 convolves the image using a horizontal weights\n  // vector.\n  // If the opaque argument is set to true the result image will have\n  // an opaque alpha channel.\n  ImageDataFloat32 horizontalConvolveFloat32(ImageData pixels,\n                                             Array weights,\n                                             bool opaque)\n\n  // verticalConvolveFloat32 convolves the image using a vertical weights\n  // vector.\n  // Returns a ImageDataFloat32.\n  // If the opaque argument is set to true the result image will have\n  // an opaque alpha channel.\n  ImageDataFloat32 verticalConvolveFloat32(ImageData pixels,\n                                           Array weights,\n                                           bool opaque)\n\n  // separableConvolveFloat32 convolves the image using vertically and\n  // horizontally using the supplied vectors. Faster than convolve for separable\n  // kernels.\n  // Returns a ImageDataFloat32.\n  // If the opaque argument is set to true the result image will have\n  // an opaque alpha channel.\n  ImageDataFloat32 separableConvolveFloat32(ImageData pixels,\n                                            Array horizWeights,\n                                            Array vertWeights,\n                                            bool opaque)\n\n\n  //\n  // Pre-defined convolution filters\n  //\n\n  // gaussianBlur applies a gaussian blur kernel of the wanted diameter on the image.\n  ImageData gaussianBlur(ImageData pixels, float diameter)\n\n  // laplace applies a Laplace edge detection kernel on the image.\n  ImageData laplace(ImageData pixels)\n\n  // sobel applies a Sobel filter on the image.\n  // This filter is purely for looks, the red channel encodes absolute vertical\n  // gradient and the green channel absolute horizontal gradient.\n  ImageData sobel(ImageData pixels)\n\n  // sobelVectors computes the signed horizontal and vertical gradients of the image\n  // and returns the array of resulting 2-vectors, packed tightly into a Float32Array\n  Float32Vec2ImageData sobelVectors(ImageData pixels)\n\n  // sobelVerticalGradient computes the signed vertical gradient of the image\n  ImageDataFloat32 sobelVerticalGradient(ImageData pixels)\n\n  // sobelHorizontalGradient computes the signed horizontal gradient of the image\n  ImageDataFloat32 sobelHorizontalGradient(ImageData pixels)\n\n\n  //\n  // Blend operations\n  //\n\n  // darkenBlend blends b on top of a, replacing a with b whenever b is darker.\n  // The filter operates on a per-channel basis, the result pixels\n  // are computed as [min(a.r, b.r), min(a.g, b.g), min(a.b, b.b), alpha(a.a, b.a)]\n  // where alpha(a, b) = a + (255-a)*b/255.\n  ImageData darkenBlend(ImageData a, ImageData b)\n\n  // lightenBlend blends b on top of a, replacing a with b whenever b is lighter.\n  // The filter operates on a per-channel basis, the result pixels\n  // are computed as [max(a.r, b.r), max(a.g, b.g), max(a.b, b.b), alpha(a.a, b.a)]\n  // where alpha(a, b) = a + (255-a)*b/255.\n  ImageData lightenBlend(ImageData a, ImageData b)\n\n  // addBlend blends b on top of a, adding b's values to a.\n  // [a.r+b.r, a.g+b.g, a.b+b.b, alpha(a.a, b.a)]\n  // where alpha(a, b) = a + (255-a)*b/255.\n  ImageData addBlend(ImageData a, ImageData b)\n\n  // subBlend blends b on top of a, subtracting b's values to a.\n  // [a.r-(255-b.r), a.g-(255-b.g), a.b-(255-b.b), alpha(a.a, b.a)]\n  // where alpha(a, b) = a + (255-a)*b/255.\n  ImageData subBlend(ImageData a, ImageData b)\n\n  // multiplyBlend blends b on top of a, multiplying b with a.\n  // [a.r*b.r/255, a.g*b.g/255, a.b*b.b/255, alpha(a.a, b.a)]\n  // where alpha(a, b) = a + (255-a)*b/255.\n  ImageData multiplyBlend(ImageData a, ImageData b)\n\n  // screenBlend blends b on top of a with the screen blend mode.\n  // Makes a brighter by an amount determined by b.\n  // [255 - (255 - b.c)*(255 - a.c)/255, ...,  alpha(a.a, b.a)]\n  // where alpha(a, b) = a + (255-a)*b/255.\n  ImageData screenBlend(ImageData a, ImageData b)\n\n  // differenceBlend blends b on top of a by taking the absolute difference\n  // between the images.\n  // [Math.abs(a.c-b.c), alpha(a.a, b.a)]\n  // where alpha(a, b) = a + (255-a)*b/255.\n  ImageData differenceBlend(ImageData a, ImageData b)\n\n}\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimotgl%2Fcanvasfilters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimotgl%2Fcanvasfilters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimotgl%2Fcanvasfilters/lists"}