放大鏡

昨天使用到了getImageData()去拿取畫布裡的顏色資料，而前幾天在【Day07】Canvas-繪製影像那天有講到drawImage(image, sx, sy, swidth, sheight, x, y, width, height)，可以裁剪別的影像或畫布的區塊並放置到自己指定的位置和指定大小。

所以今天要利用第二塊畫布及drawImage()和等等會介紹到的imageSmoothingEnabled屬性來完成類似放大鏡的效果。

反鋸齒屬性

imageSmoothingEnabled是Canvas用来設定圖片是否平滑的屬性，true表示平滑（預設），false表示不平滑，預設是啟用的，以下的放大鏡範例會透過checkbox來開關這個屬性。MDN解釋看這裡

小小範例-放大鏡

codepen範例連結

先載入圖片及畫出及裁剪放大鏡

draw(){
 const canvas = document.getElementById('testCanvas')
 this.testCanvas=canvas
 if(canvas.getContext){
 const ctx = canvas.getContext('2d') //第一塊有圖片的畫布
 const zoomctx = document.getElementById('zoomCanvas').getContext('2d') //第二塊放大鏡畫布
 this.ctx=ctx
 this.zoomctx=zoomctx
 zoomctx.beginPath() 
 zoomctx.arc(100,100,99,0,Math.PI*2,true) //放大鏡圓形框路徑
 zoomctx.stroke() //做圓形放大鏡
 zoomctx.beginPath()
 zoomctx.arc(100,100,98,0,Math.PI*2,true) //放大鏡圓形路徑
 zoomctx.clip() //裁剪放大鏡畫布為圓形
 img.onload=()=>{
    ctx.drawImage(img, 0, 25, 300, 250) //畫圖
 }

擷取區塊並放大

pick(e){
  let X=e.x ? e.x-this.canvasX:0
  let Y=e.y ? e.y-this.canvasY:0
  this.zoomctx.drawImage(this.testCanvas,Math.abs(X-5),Math.abs(Y-5),10,10,0,0,200,200)
}

控制使否平滑化的開關function(不同的瀏覽器有不同的前綴)

toggleSmoothing(){
 this.zoomctx.imageSmoothingEnabled = this.checked
 this.zoomctx.mozImageSmoothingEnabled = this.checked
 this.zoomctx.webkitImageSmoothingEnabled = this.checked
 this.zoomctx.msImageSmoothingEnabled = this.checked
}

最後成果:

～如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
[2]https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled