Oil Paint Filter

node v0.12.18
version: 7.0.0
endpointsharetweet
// Combining: // http://www.html5rocks.com/en/tutorials/canvas/imagefilters/ // http://softwarebydefault.com/2013/06/29/oil-painting-cartoon-filter/ var R = require("ramda"); module.exports = function (aBuffer) { var size = require('image-size')(aBuffer); var canvas = new (require("canvas"))(size.width, size.height); var context = canvas.getContext("2d"); var image = new (require("canvas").Image)(); image.src = aBuffer; context.drawImage(image, 0, 0, size.width, size.height); context.putImageData(oilPaint(context, size, 13, 5), 0, 0); return canvas.toBuffer(); }; var notebook = require("notebook"); var googleSearch = notebook("tolmasky/google-image-search/3.0.0"); var horseBuffer = await googleSearch("horse (domestic)") await (module.exports(horseBuffer));
function oilPaint(aContext, size, levels, filterSize) { levels = levels - 1; var filterOffset = Math.floor((filterSize - 1) / 2); var byteOffset = 0; var calcOffset = 0; var currentIntensity = 0; var maxIntensity = 0; var maxIndex = 0; var imageData = aContext.getImageData(0, 0, size.width, size.height); var pixelBuffer = imageData.data; var resultImageData = aContext.createImageData(imageData); var resultBuffer = resultImageData.data; for (var i = 0; i < pixelBuffer.length; ++i) resultBuffer[i] = pixelBuffer[i]; var toPixel = (x, y) => x * 4 + y * size.width * 4; for (var offsetY = filterOffset; offsetY < imageData.height - filterOffset; offsetY++) { for (var offsetX = filterOffset; offsetX < size.width - filterOffset; offsetX++) { var blue = 0; var green = 0; var red = 0; var currentIntensity = 0; var maxIntensity = 0; var maxIndex = 0; var intensityBin = R.times(() => 0, levels + 1); var blueBin = R.times(() => 0, levels + 1); var greenBin = R.times(() => 0, levels + 1); var redBin = R.times(() => 0, levels + 1); var byteOffset = toPixel(offsetX, offsetY); for (var filterY = -filterOffset; filterY <= filterOffset; filterY++) { for (var filterX = -filterOffset; filterX <= filterOffset; filterX++) { var calcOffset = byteOffset + toPixel(filterX, filterY); var currentIntensity = Math.round(( (pixelBuffer[calcOffset] + pixelBuffer[calcOffset + 1] + pixelBuffer[calcOffset + 2]) / 3.0 * (levels)) / 255.0); intensityBin[currentIntensity] += 1; blueBin[currentIntensity] += pixelBuffer[calcOffset]; greenBin[currentIntensity] += pixelBuffer[calcOffset + 1]; redBin[currentIntensity] += pixelBuffer[calcOffset + 2]; if (intensityBin[currentIntensity] > maxIntensity) { maxIntensity = intensityBin[currentIntensity]; maxIndex = currentIntensity; } } } var blue = blueBin[maxIndex] / maxIntensity; var green = greenBin[maxIndex] / maxIntensity; var red = redBin[maxIndex] / maxIntensity; resultBuffer[byteOffset] = ClipByte(blue); resultBuffer[byteOffset + 1] = ClipByte(green); resultBuffer[byteOffset + 2] = ClipByte(red); resultBuffer[byteOffset + 3] = 255; } } return resultImageData; } function ClipByte(byte) { return byte > 255 ? 255 : byte < 0 ? 0 : byte; }
Loading…

3 comments

  • posted a year ago by olddynasty
    https://www.facebook.com/fabian.silvacardenas.3?mibextid=ZbWKwL
  • posted a year ago by olddynasty
    https://www.facebook.com/olddynastysilba?mibextid=ZbWKwL
  • posted a year ago by olddynasty
    https://youtube.com/@OLDDYNASTYSILVA

sign in to comment