使用帆布怎么实现一个图片马赛克效果 - 行业资讯 - 肥雀云

　　介绍

本篇文章为大家展示了使用帆布怎么实现一个图片马赛克效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强> 1。原生画布上实现用到API的

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

Canvas.getContext (& # 39; 2 d # 39;),//,返回一个,CanvasRenderingContext2D 对象,使用它可以绘制到,Canvas 元素中

2) drawImage

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

使用帆布怎么实现一个图片马赛克效果

3) getImageData (x, y,宽度、高度)——获取矩形区域的图像信息

ctx.getImageData(0, 0, 10日,10),//,获取左上角坐标为(0,0),宽高为区域内的图像信息//,返回ImageData:{,,宽度:10日身高:,10日,数据:,Uint8ClampedArray [400],}

4) beginPath() - - -开始一条路径,或重置当前的路径5)矩形(x, y,宽度、高度)——绘制矩形

6)线宽——设置或返回当前线条的宽度

7) fillStyle——设置或返回用于填充绘画的颜色,渐变或模式

ctx.fillStyle =,颜色梯度| |模式

8) strokeStyle——设置或返回用于笔触的颜色,渐变或模式

9) globalAlpha——设置或返回绘图的当前透明值

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

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

11)中风()- - -会实际地绘制出通过函数()和画线()方法定义的路径。默认颜色是黑色

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

Canvas.toDataURL(“图像/png",, 1)

<强> 2。fabric.js

简化帆布编写的库,为画布提供所缺少的对象模型

<强>织物。js能做的事

1)在画布上创建,填充图形(包括图片,文字,规则图形和复杂路径组成图形)

2)给图形填充渐变颜色

3)组合图形(包括组合图形,图形文字,图片等)

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

5)生成JSON, SVG数据等

3。使用织物。js实现用到API的

1)声明画布

let canvas =new fabric.Canvas(& # 39;帆布# 39;),{ 　　,,,宽度:200年, 　　,,身高:200 　　}

插入图片

let imgInstance =, new fabric.Image (imgElement, { 　　,,左:0, 　　,,:0, 　　,,宽度:100年, 　　,,身高:100年, 　　,,角度:0 　　}

3)设置背景图片setBackgroundImage

canvas.setBackgroundImage (imgInstance)

4) renderAll()重新绘制

5)在()用户交互

canvas.on(& # 39;鼠:下来# 39;,,功能(选项),{,, 　　,,console.log (options.e.clientX, options.e.clientY),, 　　})//,监听事件/*, 　　,,鼠标:down :鼠标按下时　　,,鼠标:move :鼠标移动时　　,,鼠标:up :鼠标抬起时　　后,才能:render :画布重绘后　　,,对象:选择:对象被选中　　,,对象:移动:对象移动　　,,对象:旋转:对象被旋转　　,,对象:补充道:对象被加入　　,,对象:删除对象被移除, 　　*/

6) getPointer ()

7) setWidth (), setHeight()设置画布的宽高

8)画矩形

let rect =, new fabric.Rect ({ 　　,左:0, 　　,上图:0, 　　100年,宽度: 　　,身高:100 　　})

添加(obj)添加图形

canvas.add(矩形)

10)删除(obj)移除图形

11)组()设置对象内容

12) toDataURL (obj)

<强> 4。原生画布上实现代码

& lt; template> 　　& lt; div 类=癱ontainer"祝辞　　& lt;才能div 类=皁perations"比; 　　,,,& lt; ul> 　　,,,,,& lt; li @click=癿osaic"在马赛克& lt;/li> 　　,,,,,& lt; li @click=癮ddText"在添加文字& lt;/li> 　　,,,,,& lt; li @click=皌ailor"在裁剪& lt;/li> 　　,,,,,& lt; li @click=皉otate"在旋转& lt;/li> 　　,,,,,& lt; li @click=癳xportImg"在导出图片& lt;/li> 　　,,,& lt;/ul> 　　& lt;才能/div> 　　& lt;才能canvas ref=癷mgContent",类=癷mg-wrap"比; 　　,,,你的浏览器太低? 　　& lt;才能/canvas> 　　& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　export 才能;default { 　　,,,data (), { 　　,,,,,return { 　　,,,,,,,背景:,& # 39;& # 39; 　　,,,,,,,画布:,& # 39;& # 39; 　　,,,,,,,isMasic:,假的, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null