canvas-dither - 🖼 Simple demo of image processing in Javascript using HTML5 and Canvas

  •        98

Simple demo of image processing in Javascript using HTML5 and Canvas. Takes a lot of learned stuff from my fractal-thing project (and improves on it significantly).

http://ticky.github.io/canvas-dither/
https://github.com/ticky/canvas-dither

Tags
Implementation
License
Platform

   




Related Projects

Jimp - An image processing library written entirely in JavaScript for Node

  •    Javascript

An image processing library for Node written entirely in JavaScript, with zero native dependencies. It supports image manipulation methods like Blit an image, Blur an image, Various color manipulation methods, Resize, Scale and Rotate the image, Apply a dither effect to an image, Mask one image with another, Print text onto an image (watermark) and lot more.

vintageJS - Add a retro/vintage effect to images using the HTML5 canvas element

  •    Javascript

Add a retro/vintage effect to images using the HTML5 canvas element. 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.

ImageMagick

  •    C++

ImageMagick is a software suite to create, edit, and compose bitmap images. It can read, convert and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Use ImageMagick to translate, flip, mirror, rotate, scale, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

palette - Node.js image color palette extraction with node-canvas

  •    Javascript

Note: Palette's dependency, node-canvas, requires that Cairo be installed. Please see the installation guide for node-canvas for further details.Palette's public API consists of a single function, the one returned by require(). This function accepts the canvas you wish to compute a color palette for, and an optional number of samples defaulting to 5.

Toast UI Image Editor - Full featured image editor using HTML5 Canvas

  •    Javascript

Toast UI Image Editor is a full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. It supports Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter, Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, GradientTransparency, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend and lot more.


node-canvas - Node canvas is a Cairo backed Canvas implementation for NodeJS.

  •    C++

Alpha versions of 2.0 can be installed using npm install canvas@next.node-canvas is a Cairo backed Canvas implementation for NodeJS.

canvas - Cairo in Go: vector to raster, SVG, PDF, EPS, WASM, OpenGL, Gio, etc.

  •    Go

Canvas is a common vector drawing target that can output SVG, PDF, EPS, raster images (PNG, JPG, GIF, ...), HTML Canvas through WASM, OpenGL, and Gio. It has a wide range of path manipulation functionality such as flattening, stroking and dashing implemented. Additionally, it has a text formatter and embeds and subsets fonts (TTF, OTF, WOFF, WOFF2, or EOT) or converts them to outlines. It can be considered a Cairo or node-canvas alternative in Go. See the example below in Figure 1 for an overview of the functionality. Figure 1: top-left you can see text being fitted into a box, justified using Donald Knuth's linea breaking algorithm to stretch the spaces between words to fill the whole width. You can observe a variety of styles and text decorations applied, as well as support for LTR/RTL mixing and complex scripts. In the bottom-right the word "stroke" is being stroked and drawn as a path. Top-right we see a LaTeX formula that has been converted to a path. Left of that we see an ellipse showcasing precise dashing, notably the length of e.g. the short dash is equal wherever it is on the curve. Note that the dashes themselves are elliptical arcs as well (thus exactly precise even if magnified greatly). To the right we see a closed polygon of four points being smoothed by cubic Béziers that are smooth along the whole path, and the blue line on the left shows a smoothed open path. On the bottom you can see a rotated rasterized image. The result is equivalent for all renderers (PNG, PDF, SVG, etc.).

wind-js - An demo animation of wind on a Canvas layer in the JSAPI

  •    Javascript

This project is an experiment in client-side data processing and visualization. Most of the code in this project is taken from https://github.com/cambecc/earth and has been re-purposed to support easier application to a variety of mapping APIs and Frameworks. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). The data is passed into a JS class called Windy which takes the bounds of the map, the data, and the canvas element and then applies a Bilinear Interpolation to generate a smooth surface. Once the surface has been generated a function randomly places "particles" onto the canvas at random x/y points. Each particle is then "evolved", moving in a direction and at a velocity dictated by the interpolated surface.

nude.js - Nudity detection with JavaScript and HTMLCanvas

  •    Javascript

nude.js is a JavaScript implementation of a nudity scanner based on approaches from research papers. HTMLCanvas makes it possible to analyse image data and afterwards decide whether it should be displayed or not. The detection algorithm runs at the client, therefore it's possible (with user interaction) to display the image even if it's identified as nude (false positive) The real world usage for client side nudity detection could be in webproxies with child security filters, and maybe even more (e.g. on social media plattforms) nude.js is Open Source. Contributions are very welcome, the goal is to build a reliable client-side nudity scanner.Test the nudity detection script on several predefined images, I didn't have enough time to build a nice demo with flickr image support but feel free to test some of your images too. nude.js is currently supported in IE9(excanvas), FF 3.6+, Chrome, Safari and Opera. For really fast results try Chrome.

domvas - Domvas implements the missing piece that connects the DOM and Canvas.

  •    Javascript

Domvas implements the missing piece that connects the DOM and Canvas. It gives to the ability to take arbitrary DOM content and paint it to a Canvas of your choice. readyCallback's 'this' and first argument points to a valid, preloaded image node that you can simply draw to your canvas context.

PixelCraft - A Pixel Art Editor

  •    Javascript

A pixel Art & Animation Creation Tool Built using HTML5 Canvas. It is a Progressive Web App (PWA) with offline compatibility. It is mobile-friendly and is very easy to use. You can choose Any Dimensions for your Canvas, 16 X 16 is the default dimension. Dimensions below 128 X 128 are preferable for smooth operation and GIF creation.

dom-to-image - Generates an image from a DOM node using HTML5 canvas

  •    Javascript

dom-to-image is a library which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript. It's based on domvas by Paul Bakaus and has been completely rewritten, with some bugs fixed and some new features (like web font and image support) added. Include either src/dom-to-image.js or dist/dom-to-image.min.js in your page and it will make the domtoimage variable available in the global scope.

FILTER

  •    Javascript

This is a library for processing images/video in pure JavaScript using HTML5 features like Canvas, WebWorkers, WebGL and SVG (in progress) or analogs in Node.js. Some filters code has been adapted from open source libraries (mostly c, java and flash, plus a couple from javascript libraries), see the comments in the code for details.

react-avatar-editor - Avatar & profile picture component editor

  •    Javascript

Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface. The resulting image will have the same resolution as the original image, regardless of the editor's size. If you want the image sized in the dimensions of the canvas you can use getImageScaledToCanvas.

ios-imagefile-megapixel - Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel), which causes unexpected subsampling when drawing it in canvas

  •    Javascript

Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel), which causes unexpected subsampling when drawing it in canvas. By using this library, you can safely render the image with proper stretching. Although it mainly focuses fixing iOS Safari related issues, it can be safely used in the envionments other than iOS6.

jpg-glitch - glitch images with jpg encoding

  •    Javascript

this is an experiment for the web browser. it corrupts jpg images so that they appear "glitched". this experiment is very much based on the smack my glitch up js script.

darkroomjs - [UNMAINTAINED] Extensible image editing tool in your browser

  •    Javascript

DarkroomJS is a JavaScript library which provides basic image editing tools in your browser, such as rotation or cropping. It is based on the awesome FabricJS library to handle images in HTML5 canvas. It's easy to get a javascript script to crop an image in a web page. But if your want more features like rotation or brightness adjustment, then you will have to do it yourself. No more jQuery plugins here. It only uses the power of HTML5 canvas to make what ever you want with your image.

canvas-sketch - [beta] A framework for making generative artwork in JavaScript and the browser.

  •    Javascript

This is in early beta stages, don't expect it to work reliably across versions yet. I'm looking for collaborators and beta testers, so please post an issue if you find any problems or want to help out with this project in some way. canvas-sketch is a loose collection of tools, modules and resources for creating generative art in JavaScript and the browser.

leaflet-image - leaflet maps to images

  •    Javascript

Export images out of Leaflet maps without a server component, by using Canvas and CORS.For Leaflet >= 1.0.0: You must set renderer: L.canvas() for any layer that you want included in the generated image. You can also set this by setting preferCanvas: true in your map's options.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.