摘要:前言業(yè)務場景圖片儲存在后臺中,根據(jù)圖片的地址,在頁面中,查看圖片,并根據(jù)坐標標注指定區(qū)域。由于瀏覽器的機制,使用下載圖片時,并不會保存到本地,會在瀏覽器打開。實現(xiàn)原理繪制畫布查看圖片這里為了交互體驗,使用了的彈窗方式。
1 前言 1.1 業(yè)務場景
圖片儲存在后臺中,根據(jù)圖片的地址,在vue頁面中,查看圖片,并根據(jù)坐標標注指定區(qū)域。
由于瀏覽器的機制,使用window.location.href下載圖片時,并不會保存到本地,會在瀏覽器打開。
2 實現(xiàn)原理 2.1 繪制畫布這里為了交互體驗,使用了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的基礎使用,具體的交互和展示還需要更多的設計。
感謝支持。若不足之處,歡迎大家指出,共勉。
如果覺得不錯,記得 點贊,謝謝大家
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103868.html
摘要:注意事項開始時按像素大小的畫布寫,最后發(fā)現(xiàn)放在分辨率高的手機上全是鋸齒,所以最后采用的寬高來寫。繪制完圖片頭像會覆蓋整個畫布,所以圖片得最后繪制。弧形文字需要一點一旦調整弧度。 學完我寫的上一章小白上學canvas基礎,我們就來這里現(xiàn)學現(xiàn)用了。這里先看我們的設計圖和最終實現(xiàn)效果;左面是設計稿,右面是完成后的效果圖: 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.) 具有如下特性: 繪制文本(換行、超出內容省略號、中劃線、下劃線、文本加粗) 繪制圖片(圓...
閱讀 1330·2021-11-25 09:43
閱讀 739·2021-11-18 10:02
閱讀 2862·2021-09-07 09:59
閱讀 2748·2021-08-30 09:44
閱讀 2921·2019-08-30 13:17
閱讀 2305·2019-08-29 12:17
閱讀 1673·2019-08-28 17:57
閱讀 1281·2019-08-26 14:04