資訊專欄INFORMATION COLUMN
摘要：前言業(yè)務(wù)場景圖片儲存在后臺中，根據(jù)圖片的地址，在頁面中，查看圖片，并根據(jù)坐標(biāo)標(biāo)注指定區(qū)域。由于瀏覽器的機制，使用下載圖片時，并不會保存到本地，會在瀏覽器打開。實現(xiàn)原理繪制畫布查看圖片這里為了交互體驗，使用了的彈窗方式。
1 前言 1.1 業(yè)務(wù)場景
圖片儲存在后臺中，根據(jù)圖片的地址，在vue頁面中，查看圖片，并根據(jù)坐標(biāo)標(biāo)注指定區(qū)域。
由于瀏覽器的機制，使用window.location.href下載圖片時，并不會保存到本地，會在瀏覽器打開。
2 實現(xiàn)原理 2.1 繪制畫布這里為了交互體驗，使用了element-ui的彈窗方式。將canvas畫布放到了彈窗中。
為了突出畫布效果可以在css中設(shè)置一個邊框。
#mycanvas {
border: 1px solid rgb(199, 198, 198);
}
2.2 繪制圖片
// imageUrl為后臺提供圖片地址
doDraw(imageUrl){
// 獲取canvas
var canvas = document.getElementById("mycanvas")
// 由于彈窗，確保已獲取到
var a = setInterval(() =>{
// 重復(fù)獲取
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ū)挾?/p>
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) 線條的起點和終點坐標(biāo)
strokeStyle lineWidth 線條的樣式
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 下載圖片// 圖片地址和圖片名稱
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的基礎(chǔ)使用，具體的交互和展示還需要更多的設(shè)計。
感謝支持。若不足之處，歡迎大家指出，共勉。
如果覺得不錯，記得 點贊，謝謝大家
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103868.html
摘要：注意事項開始時按像素大小的畫布寫，最后發(fā)現(xiàn)放在分辨率高的手機上全是鋸齒，所以最后采用的寬高來寫。繪制完圖片頭像會覆蓋整個畫布，所以圖片得最后繪制?；⌒挝淖中枰稽c一旦調(diào)整弧度。 學(xué)完我寫的上一章小白上學(xué)canvas基礎(chǔ)，我們就來這里現(xiàn)學(xué)現(xiàn)用了。這里先看我們的設(shè)計圖和最終實現(xiàn)效果；左面是設(shè)計稿，右面是完成后的效果圖： showImg(https://segmentfault.com/im...
vue-canvas-poster vue 組件-簡單屬性畫 Canvas 圖github 概述 一個通過 css 屬性畫 canvas 圖片的輕量級的 vue 組件(A lightweight vue components use canvas draw image by css properties.) 具有如下特性： 繪制文本(換行、超出內(nèi)容省略號、中劃線、下劃線、文本加粗) 繪制圖片(圓...
閱讀 1373·2021-11-25 09:43
閱讀 797·2021-11-18 10:02
閱讀 2998·2021-09-07 09:59
閱讀 2803·2021-08-30 09:44
閱讀 2961·2019-08-30 13:17
閱讀 2358·2019-08-29 12:17
閱讀 1714·2019-08-28 17:57
閱讀 1331·2019-08-26 14:04
