Vue+Canvas繪圖使用的講解

更新時間：2022年08月11日 08:55:37 作者：非往

這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue使用Canvas繪圖

1、前言

圖片儲存在后臺中，根據(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>
?
//為了突出畫布效果可以在css中設(shè)置一個邊框。
#mycanvas {
? ? border: 1px solid rgb(199, 198, 198);
}

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

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ù)圖像重新設(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ū)挾?/li>
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 文字內(nèi)容
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
},

Vue使用Canvas的小demo

今天接到一個需求，在vue+element管理后臺中新增一個保存canvas圖片的需求，所以先寫了一個小demo

// html中
<div class="contain">
	<canvas id="myCanvas" width="500" height="500" ref="myCanvas"></canvas> 
</div>

// js中
drowCanvas () {
    let myCanvas = this.$refs.myCanvas
    //畫布的寬高
    let Cwidth = 500
    let CHeight = 500
    // 創(chuàng)建一個畫布上繪圖的環(huán)境
    var ctx = myCanvas.getContext('2d')
    // 一般情況下，canvas的背景顏色是透明的，當生成圖片的時候也是透明
    // 如果希望圖片有個背景顏色，可以創(chuàng)建一個框高100%的矩形
    // 畫布的最底端-這樣就可以有個背景顏色
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, Cwidth, CHeight);
    
    //設(shè)置顏色也可以適用rgba
    ctx.fillStyle = 'rgba(0,0,0,0.9)'
    //繪制一個矩形的邊框(x, y, width, height)
    ctx.strokeRect(50, 100, 100, 100)
    
    // 可以在頁面插入文字
    ctx.fillStyle = '#333'
    
    // 三個參數(shù)-文字，橫坐標-縱坐標
    ctx.font = '16px Arial'
    ctx.fillText('今天是個好日子', 50, 50);
    ctx.fillText('心想的事兒都能成', 50, 80);
    
    // 繪制一個實心的方塊
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(200, 30, 80, 50);
    
    // 還可以插入圖片
    // 首先創(chuàng)建一個圖片標簽
    // 然后插入圖片
    let imgObj = new Image()
    imgObj.src = 'http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&f=JPEG?w=1200&h=1290'
    // let imgUrl = this.imgOnload(imgObj)
    imgObj.onload = function () {
    	// 關(guān)于坐標問題
    	// 一般繪制圖片，只是畫上去，這里外層canvas是500*500，相當于居中了，只是
    	// 被裁剪了
    	// 從圖片的593,327 坐標開始截圖，截取 500，500 這么大
		// 然后將截取的圖片，從canvas 100，100開始畫， 縮放 300，300 這么大！
        ctx.drawImage(imgObj, 593,327,500,500,100,100,300,300)
    }
    
    // 生成圖片（圖片的格式）
    let imageUrl = myCanvas.toDataURL("image/png", 0.5);
    // base64圖片地址就獲取到了
    // 現(xiàn)實中存在兩種情況，一個顯示頁面中，點擊下載，這個就簡單了，可以利用a標簽進行下載
    //還有一種情況就是，圖片base64地址生成后，自動下載
    // 調(diào)用方法下載canvas
    this.downloadFile(imageUrl, '1.png')
},
// 創(chuàng)建下載圖片事件
downloadFile(data, filename) {
   //創(chuàng)建一個具有指定的命名空間URI和限定名稱的元素
   var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
   save_link.href = data;
   save_link.download = filename;
   // 綁定下載事件
   var event = document.createEvent('MouseEvents');
   event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false,         false, false, 0, null);
   save_link.dispatchEvent(event);
},

繪制出來的canvas圖片有點丑

不過還是只是樣式問題，下載也可以正常試用，只需要吧代碼套到具體的業(yè)務需求里面去就可以了

順便總結(jié)一波

繪制圖片的時候傳參的問題

	/*3參數(shù)*/
    /*圖片對象*/
    /*繪制在畫布上的坐標 x y*/
    //ctx.drawImage(image,100,100);
    
	/*5個參數(shù)*/
    /*圖片對象*/
    /*繪制在畫布上的坐標 x y*/
    /*是圖片的大小  不是裁剪  是縮放*/
    //ctx.drawImage(image,100,100,100,100);
    /*9個參數(shù)*/
    /*圖片對象*/
    /*圖片上定位的坐標  x y */
    /*在圖片上截取多大的區(qū)域  w h*/
    /*繪制在畫布上的坐標 x y*/
    /*是圖片的大小  不是裁剪  是縮放*/
    ctx.drawImage(image,400,400,400,400,200,200,100,100);

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: