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},3 后記
這里只是列出canvas的基礎使用，具體的交互和展示還需要更多的設計。
總結
以上所述是小編給大家介紹的Vue使用Canvas繪制圖片、矩形、線條、文字，下載圖片,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
