Vue+Canvas繪圖使用的講解

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

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

Vue使用Canvas繪圖

1、前言

圖片儲(chǔ)存在后臺(tái)中，根據(jù)圖片的地址，在vue頁(yè)面中，查看圖片，并根據(jù)坐標(biāo)標(biāo)注指定區(qū)域。

由于瀏覽器的機(jī)制，使用window.location.href下載圖片時(shí)，并不會(huì)保存到本地，會(huì)在瀏覽器打開(kāi)。

2、實(shí)現(xiàn)原理

2.1 繪制畫(huà)布

<el-dialog
? ? title="查看圖片"
? ? :visible.sync="dialogJPG"
? ? append-to-body>
? ? <canvas id="mycanvas" width="940" height="570"></canvas>
</el-dialog>
?
//為了突出畫(huà)布效果可以在css中設(shè)置一個(gè)邊框。
#mycanvas {
? ? border: 1px solid rgb(199, 198, 198);
}

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

2.2 繪制圖片

// ?imageUrl為后臺(tái)提供圖片地址
doDraw(imageUrl){
? ? // ?獲取canvas
? ? var canvas = document.getElementById("mycanvas")
? ? // ?由于彈窗，確保已獲取到
? ? var a = setInterval(() =>{
? ? ? ? // ?重復(fù)獲取
? ? ? ? canvas = document.getElementById("mycanvas")
? ? ? ? if(!canvas){
? ? ? ? ? return false
? ? ? ? } else {
? ? ? ? ? ? clearInterval(a)
? ? ? ? ? ? // ?可以理解為一個(gè)畫(huà)筆，可畫(huà)路徑、矩形、文字、圖像
? ? ? ? ? ? var context = canvas.getContext('2d')
? ? ? ? ? ? var img = new Image()
? ? ? ? ? ? img.src = imageUrl
? ? ? ? ? ? // ?加載圖片
? ? ? ? ? ? img.onload = function(){
? ? ? ? ? ? ? ? if(img.complete){
? ? ? ? ? ? ? ? ? ? // ?根據(jù)圖像重新設(shè)定了canvas的長(zhǎng)寬
? ? ? ? ? ? ? ? ? ? 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 矩形位置加長(zhǎng)寬

2.4 繪制線(xiàn)條

context.moveTo(x1,y1)
context.lineTo(x2,y2)
context.strokeStyle = "red"
context.lineWidth = 3;
context.stroke()

(x1,y1) (x2,y2) 線(xiàn)條的起點(diǎn)和終點(diǎn)坐標(biāo)
strokeStyle lineWidth 線(xiàn)條的樣式

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 下載圖片

// 圖片地址和圖片名稱(chēng)
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

今天接到一個(gè)需求，在vue+element管理后臺(tái)中新增一個(gè)保存canvas圖片的需求，所以先寫(xiě)了一個(gè)小demo

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

// js中
drowCanvas () {
    let myCanvas = this.$refs.myCanvas
    //畫(huà)布的寬高
    let Cwidth = 500
    let CHeight = 500
    // 創(chuàng)建一個(gè)畫(huà)布上繪圖的環(huán)境
    var ctx = myCanvas.getContext('2d')
    // 一般情況下，canvas的背景顏色是透明的，當(dāng)生成圖片的時(shí)候也是透明
    // 如果希望圖片有個(gè)背景顏色，可以創(chuàng)建一個(gè)框高100%的矩形
    // 畫(huà)布的最底端-這樣就可以有個(gè)背景顏色
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, Cwidth, CHeight);
    
    //設(shè)置顏色也可以適用rgba
    ctx.fillStyle = 'rgba(0,0,0,0.9)'
    //繪制一個(gè)矩形的邊框(x, y, width, height)
    ctx.strokeRect(50, 100, 100, 100)
    
    // 可以在頁(yè)面插入文字
    ctx.fillStyle = '#333'
    
    // 三個(gè)參數(shù)-文字，橫坐標(biāo)-縱坐標(biāo)
    ctx.font = '16px Arial'
    ctx.fillText('今天是個(gè)好日子', 50, 50);
    ctx.fillText('心想的事兒都能成', 50, 80);
    
    // 繪制一個(gè)實(shí)心的方塊
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(200, 30, 80, 50);
    
    // 還可以插入圖片
    // 首先創(chuàng)建一個(gè)圖片標(biāo)簽
    // 然后插入圖片
    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)于坐標(biāo)問(wèn)題
    	// 一般繪制圖片，只是畫(huà)上去，這里外層canvas是500*500，相當(dāng)于居中了，只是
    	// 被裁剪了
    	// 從圖片的593,327 坐標(biāo)開(kāi)始截圖，截取 500，500 這么大
		// 然后將截取的圖片，從canvas 100，100開(kāi)始畫(huà)， 縮放 300，300 這么大！
        ctx.drawImage(imgObj, 593,327,500,500,100,100,300,300)
    }
    
    // 生成圖片（圖片的格式）
    let imageUrl = myCanvas.toDataURL("image/png", 0.5);
    // base64圖片地址就獲取到了
    // 現(xiàn)實(shí)中存在兩種情況，一個(gè)顯示頁(yè)面中，點(diǎn)擊下載，這個(gè)就簡(jiǎn)單了，可以利用a標(biāo)簽進(jìn)行下載
    //還有一種情況就是，圖片base64地址生成后，自動(dòng)下載
    // 調(diào)用方法下載canvas
    this.downloadFile(imageUrl, '1.png')
},
// 創(chuàng)建下載圖片事件
downloadFile(data, filename) {
   //創(chuàng)建一個(gè)具有指定的命名空間URI和限定名稱(chēng)的元素
   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);
},

繪制出來(lái)的canvas圖片有點(diǎn)丑

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

順便總結(jié)一波

繪制圖片的時(shí)候傳參的問(wèn)題

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

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

您可能感興趣的文章: