简介
利用canvas加载图片后,画布上的各像素的颜色(r,g,b)值来填充色块,达到马赛克效果。效果图
代码
- html
<canvas id="canvas" data-src="images/test.jpg" width="800" height="600"></canvas>
- javascript
const mosaicImage = (target, mosaicSize = 20) => {
let canvas = document.getElementById(target),
_canvas = document.createElement('canvas');
if (!canvas || !canvas.getContext) {
return false;
}
/**
* 根据图片填充马赛克块
*/
const createMosaic = (context, width, height, size, data) => {
for (let y = 0; y < height; y += size) {
for (let x = 0; x < width;