| JSMosaic 前端图片处理，包含灰度、反转、黑白、红绿蓝、马赛克、像素化等

| 为马赛克而生却又不止马赛克

安装

npm install js-mosaic

使用

var moasic = new JSMosaic({
	canvas: document.querySelector('#myCanvas'),
	img: './src/imgs/alone.jpg',
});

效果

API

• 灰度

var imgData = moasic.offCtx.getImageData(0, 0, moasic.offCanvas.width, moasic.offCanvas.height);
imgData = moasic.Utils.grayScale(imgData);
moasic.offCtx.putImageData(imgData, 0, 0);

• 反转

var imgData = moasic.offCtx.getImageData(0, 0, moasic.offCanvas.width, moasic.offCanvas.height);
imgData = moasic.Utils.anticolor(imgData);
moasic.offCtx.putImageData(imgData, 0, 0);

• 黑白

var imgData = moasic.offCtx.getImageData(0, 0, moasic.offCanvas.width, moasic.offCanvas.height);
imgData = moasic.Utils.blankwhite(imgData);
moasic.offCtx.putImageData(imgData, 0, 0);

• 红绿蓝

var imgData = moasic.offCtx.getImageData(0, 0, moasic.offCanvas.width, moasic.offCanvas.height);
imgData = moasic.Utils.greenredblue(imgData,'1');
moasic.offCtx.putImageData(imgData, 0, 0);

• 马赛克 | moasic (imgData, rows = 20, cols = 20, isRandomColor = false)

var imgData = moasic.offCtx.getImageData(0, 0, moasic.offCanvas.width, moasic.offCanvas.height);
imgData = moasic.Utils.moasic(imgData,20,20,false);
moasic.offCtx.putImageData(imgData, 0, 0);

• 像素化 | pixelated (imgData, rows = 20, cols = 20, offsetX = 0, offsetY = 0, ctx = null, type = 'square', isRandomColoc = false)

var imgData = moasic.offCtx.getImageData(0, 0, moasic.offCanvas.width, moasic.offCanvas.height);
moasic.Utils.pixelated(imgData,20,20,0,0,moasic.ctx,'square',false);