Vue使用Canvas繪制圖片、矩形、線條、文字,下載圖片
1 前言
1.1 業(yè)務場景
圖片儲存在后臺中,根據(jù)圖片的地址,在vue頁面中,查看圖片,并根據(jù)坐標標注指定區(qū)域。
由于瀏覽器的機制,使用 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中設置一個邊框。
#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){ // 根據(jù)圖像重新設定了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 矩形邊框寬度
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繪制圖片、矩形、線條、文字,下載圖片,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
相關文章
elementui導出數(shù)據(jù)為xlsx、excel表格
本文主要介紹了elementui導出數(shù)據(jù)為xlsx、excel表格,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09vue+axios實現(xiàn)文件下載及vue中使用axios的實例
這篇文章主要介紹了vue+axios實現(xiàn)文件下載及vue中使用axios的實例,需要的朋友可以參考下2018-09-09