如何使用canvas實現圖片馬賽克

這篇文章主要介紹了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
}

插入圖片

r​​rreee

3）設定背景圖片setBackgroundImage

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

4）renderAll() 重新繪製

5)on() 使用者互動

canvas.setBackgroundImage(imgInstance)

6）getPointer()

7）setWidth()、setHeight() 設定canvas的寬高

8）畫矩形

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

add(obj) 新增圖形

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

10）remove(obj) 移除圖形

11）set() 設定物件內容

12）toDataURL(obj)

4.原生canvas實作程式碼

canvas.add(rect)

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ 

以上是如何使用canvas實現圖片馬賽克的詳細內容。更多資訊請關注PHP中文網其他相關文章！