如何使用canvas实现图片马赛克

Canvas.getContext('2d') // 返回一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中

drawImage(imgObj, x, y) // 按原图大小绘制, x、y为图片在画布中的位置坐标 drawImage(imgObj, x, y, width, height) // 按指定宽高绘制 drawImage(imgObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) // 从原来图片上某一个位置开始(sourceX,sourceY)，指定长宽进行剪切(sourceWidth,sourceHeight),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上

ctx.getImageData(0, 0, 10, 10) // 获取左上角坐标为(0, 0)，宽高为区域内的图像信息 // 返回ImageData： { width: 10, height: 10, data: Uint8ClampedArray[400] }

ctx.fillStyle = color|gradient|pattern

Canvas.toDataURL("image/png", 1)

let canvas =new fabric.Canvas('canvas') { width: 200, height: 200 }

let imgInstance = new fabric.Image(imgElement,{ left: 0, top: 0, width: 100, height: 100, angle: 0 }

canvas.setBackgroundImage(imgInstance)

canvas.on('mouse:down', function(options) { console.log(options.e.clientX, options.e.clientY) }) // 监听事件 /* mouse:down :鼠标按下时 mouse:move :鼠标移动时 mouse:up :鼠标抬起时 after:render :画布重绘后 object:selected:对象被选中 object:moving:对象移动 object:rotating:对象被旋转 object:added:对象被加入 object:removed对象被移除 */

let rect = new fabric.Rect({ left: 0, top: 0, width: 100, height: 100 })

canvas.add(rect)