1 前言

1.1 業務場景

圖片儲存在后臺中，根據圖片的地址，在vue頁面中，查看圖片，并根據坐標標注指定區域。

由于瀏覽器的機制，使用 window.location.href 下載圖片時，并不會保存到本地，會在瀏覽器打開。

2 實現原理

2.1 繪制畫布

<el-dialog  title="查看圖片"  :visible.sync="dialogJPG"  append-to-body>  <canvas id="mycanvas" width="940" height="570"></canvas></el-dialog>

這里為了交互體驗，使用了 element-ui 的彈窗方式。將canvas畫布放到了彈窗中。

為了突出畫布效果可以在css中設置一個邊框。

#mycanvas {  border: 1px solid rgb(199, 198, 198);}

2.2 繪制圖片

// imageUrl為后臺提供圖片地址doDraw(imageUrl){  // 獲取canvas  var canvas = document.getElementById("mycanvas")  // 由于彈窗，確保已獲取到  var a = setInterval(() =>{    // 重復獲取    canvas = document.getElementById("mycanvas")    if(!canvas){     return false    } else {      clearInterval(a)      // 可以理解為一個畫筆，可畫路徑、矩形、文字、圖像      var context = canvas.getContext('2d')      var img = new Image()      img.src = imageUrl      // 加載圖片      img.onload = function(){        if(img.complete){          // 根據圖像重新設定了canvas的長寬          canvas.setAttribute("width",img.width)          canvas.setAttribute("height",img.height)          // 繪制圖片          context.drawImage(img,0,0,img.width,img.height)        }      }    }  },1)},

context.drawImage() 方法的參數介紹，可參照 W3school

2.3 繪制矩形

context.strokeStyle = "red"context.lineWidth = 3;context.strokeRect(x, y, width, height)

context 同上面的定義

strokeStyle 矩形顏色

lineWidth 矩形邊框寬度

x,y,width,height 矩形位置加長寬

2.4 繪制線條

context.moveTo(x1,y1) context.lineTo(x2,y2)context.strokeStyle = "red"context.lineWidth = 3;context.stroke()

(x1,y1) (x2,y2) 線條的起點和終點坐標

strokeStyle lineWidth 線條的樣式

2.5 繪制文字

context.font = "26px Arial bolder"context.fillStyle = 'red'context.fillText(text,x,y)

font fillStyle 文字樣式

text 文字內容

x,y 文字顯示坐標

2.6 下載圖片

// 圖片地址和圖片名稱downIamge (imgsrc, name) {   let image = new Image()  image.setAttribute('crossOrigin', 'anonymous')  image.onload = function () {    let canvas = document.createElement('canvas')    canvas.width = image.width    canvas.height = image.height    let context = canvas.getContext('2d')    context.drawImage(image, 0, 0, image.width, image.height)    let url = canvas.toDataURL('image/jpg')     let a = document.createElement('a')    let event = new MouseEvent('click')    a.download = name    a.href = url    a.dispatchEvent(event)  }  image.src = imgsrc},