广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

这篇文章主要介绍了canvas实现图片马赛克的示例代码的相关资料,内容挺不错的，现在分享给大家，也给大家做个参考。

1. 原生canvas实现用到的API

1） getContext(contextID) ---返回一个用于在画布上绘图的环境

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

2）drawImage

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)的位置上

3） getImageData(x, y, width, height) ---获取矩形区域的图像信息

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

4）beginPath() ---开始一条路径，或重置当前的路径 5）rect(x, y, width, height) ---绘制矩形

6）lineWidth ---设置或返回当前线条的宽度

7）fillStyle ---设置或返回用于填充绘画的颜色、渐变或模式

ctx.fillStyle = color|gradient|pattern

8）strokeStyle ---设置或返回用于笔触的颜色、渐变或模式

9）globalAlpha ---设置或返回绘图的当前透明值

10）fill() ---填充当前的图像（路径）。默认颜色是黑色

【注】如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

11）stroke() ---会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色

12）toDataURL(type, encoderOptions) ---导出图片，type为图片类型， encoderOptions图片质量，[0, 1]

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

2. fabric.js

简化canvas编写的库，为canvas提供所缺少的对象模型

fabric.js能做的事

1）在canvas上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）

2）给图形填充渐变颜色

3）组合图形（包括组合图形、图形文字、图片等）

4）设置图形动画集用户交互

5）生成JSON, SVG数据等

3.使用fabric.js实现用到的API

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}

3）设置背景图片 setBackgroundImage

canvas.setBackgroundImage(imgInstance)

4）renderAll() 重新绘制

5）on() 用户交互

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对象被移除 */

6）getPointer()

7）setWidth()、setHeight() 设置canvas的宽高

8）画矩形

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

add(obj) 添加图形

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)的位置上0

10）remove(obj) 移除图形

11）set() 设置对象内容

12）toDataURL(obj)

4.原生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)的位置上1

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

以上就是如何使用canvas实现图片马赛克的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~