Vue使用Canvas繪製圖片、矩形、線條、文字，下載圖片

時間 2019-11-10

標籤 vue 使用 canvas 繪製圖片矩形線條文字下載简体版

原文原文鏈接

1 前言

1.1 業務場景

圖片儲存在後臺中，根據圖片的地址，在vue頁面中，查看圖片，並根據座標標註指定區域。css

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

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畫布放到了彈窗中。vue

爲了突出畫布效果能夠在css中設置一個邊框。html5

#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()方法的參數介紹，可參照 W3schoolgit

2.3 繪製矩形

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

context 同上面的定義github

strokeStyle 矩形顏色element-ui

lineWidth 矩形邊框寬度canvas

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

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
},