1 前言
1.1 業(yè)務(wù)場景
圖片儲存在后臺中，根據(jù)圖片的地址，在vue頁面中，查看圖片，并根據(jù)坐標(biāo)標(biāo)注指定區(qū)域。
由于瀏覽器的機(jī)制，使用window.location.href下載圖片時，并不會保存到本地，會在瀏覽器打開。
2 實現(xiàn)原理
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中設(shè)置一個邊框。
#mycanvas {
border: 1px solid rgb(199, 198, 198);
}
2.2 繪制圖片
// imageUrl為后臺提供圖片地址
doDraw(imageUrl){
// 獲取canvas
var canvas = document.getElementById("mycanvas")
// 由于彈窗，確保已獲取到
var a = setInterval(() =>{
// 重復(fù)獲取
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){
// 根據(jù)圖像重新設(shè)定了canvas的長寬
canvas.setAttribute("width",img.width)
canvas.setAttribute("height",img.height)
// 繪制圖片
context.drawImage(img,0,0,img.width,img.height)
}
}
}
},1)
},
context.drawImage()方法的參數(shù)介紹，可參照 W3school
2.3 繪制矩形
context.strokeStyle = "red"
context.lineWidth = 3;
context.strokeRect(x, y, width, height)
context 同上面的定義
strokeStyle 矩形顏色
lineWidth 矩形邊框?qū)挾?/p>
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) 線條的起點和終點坐標(biāo)
strokeStyle lineWidth 線條的樣式
2.5 繪制文字
context.font = "26px Arial bolder"
context.fillStyle = 'red'
context.fillText(text,x,y)
font fillStyle 文字樣式
text 文字內(nèi)容
x,y 文字顯示坐標(biāo)
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
},
3 后記
這里只是列出canvas的基礎(chǔ)使用，具體的交互和展示還需要更多的設(shè)計。
感謝支持。若不足之處，歡迎大家指出，共勉。
如果覺得不錯，記得 點贊，謝謝大家 ??
3.1 參考資料
本文章采用 知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 進(jìn)行許可。
