tml中img圖片進行等比例縮放的實例代碼
HTML中,要修改img元素定義的圖片的大小,且是等比例縮放,不改變寬和高的比值,那么可以采用只設置img元素屬性中width和height中的任何一個,不要同時設置兩個即可實現img圖片的等比例縮放效果。下面將通過兩個實例來分別實現這兩種方法。
為了可以與原圖片的大小進行對照,下面的實例使用HTML的注釋符號將等比例縮放的代碼進行了注釋,第一遍運行完之后,可以將第一行的代碼刪除(在線刪除,因為這是一個在線編輯器),然后將第二行代碼中的注釋符號去除掉,接著再運行一遍看看等比例縮放的效果:
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->
這邊的代碼與上面的幾乎一樣,只是將width的屬性修改成為height的屬性,如下:
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->
提示:如上面的兩個實例,將width和height分別設置為50%都可以等比例縮放圖片,但得到的圖片的大小不一定一樣。
當然了,如果要通過同時設置img圖片的width和height兩個屬性來達到等比例縮放圖片的話也是可以的,但是要先計算一下圖片的寬度和高度的比例,之后再等比例縮放。
來源:笨鳥工具-璞玉天成,大器晚成
原文:html img圖片等比例縮放的代碼 | HTML教程
免責聲明:內容僅供參考,不保證正確性
條APP上有個截圖分享功能,就是把文章轉成一張圖片,然后分享到各渠道中去,如微信、QQ等,非常實用,因此,打算就這項功能自己封裝為一個組件ImageGenerator,后期專門進行圖片生成,html是其中的一個源。
頭條截圖分享的實際效果圖
目前前端使用較多的html轉圖片的工具是Html2Canvas,考慮技術儲備和問題討論的充裕性,決定封裝一下這個工具。步驟如下:
按照官方要求,做安裝操作:
npm
npm install html2canvas
我當時下載的是1.4.1的版本。
這個工具有自身的一些限制,使用時要注意:
[1] 并非真正的截圖軟件,而是根據DOM繪制出來的,其繪制能力,完全依賴于工具對DOM和對應屬性的支持和理解;
[2] 因為使用了Canvas支持,生成圖片的區域不能再有Canvas應用,否則會干擾工具的生成,不能保證生成預期,因此,如果使用了Canvas圖表的應用這個工具不推薦使用
這個很簡單,這里就是封裝一個組件,用于后期引入html之外的源生成圖片,同時也做一下圖片的統一顯示,從而和系統整體的設計進行配合。大致的實現思路如下:
上圖,我們引入了工具本身,并設置的結果的顯示區。生成的結果將以節點的方式注入 #image-box 中。
上圖,封裝了一個方法,用途是利用Html2Canvas工具獲得圖片,這里我們引入了一個組件的數據imageData用以存儲和干預生成結果。在這里,我把ImageGenerator封裝為全局組件。
我們在文章的尾部加入一個share功能,點擊彈出分享設置的彈窗,實際效果如下圖所示:
以上技術實現比較簡單,這里就不進行贅述了。上圖中,我們設置了一個生成圖像按鈕,點擊該按鈕則可以觸發我們組件中的對應操作。關鍵思路包括:
【1】這里設置了一個封裝組件shareHandler,封裝了前導模塊和imageGenerator,這兩個模塊的顯示通過一個開關進行控制,該開關則通過圖像生成成功事件進行賦值,這樣的話,我們可以實現圖片生成后,不再顯示前導模塊,而是顯示圖片結果,即ImageGenerator。
【2】這里有一個比較關鍵的操作是shareHandler通過觸發事件將轉換器發射到文章轉換現場,為什么用事件,還是那句話,事件對于解耦和消除組件依賴是最自然的實現。注意,這里我把imageGenerator通過引用的方式作為參數傳出了,這樣的好處是事件將轉換器代入了轉換現場,并可以攜帶回現場轉換結果。
【3】在文章查看器,solutionViewer中,自然會訂閱事件、事件處理和取消訂閱。注意這里的事件處理,實際上是調用了轉換器中我們封裝的函數,參數則是現場取得的,這里的機制很簡單,定義要轉換div的id,作為參數傳入函數。
那么,點擊圖像后,我們可以看到效果圖:
點擊右鍵另存圖像,我們可以獲得一張png格式的圖片,至于后續對下載和到粘貼板的支持,大家可以自行研究和實現。
實現過程中有幾個注意事項:
【1】Canvas返回時,其長寬都是按照實際大小生成的,而我們的例子中,則要根據右抽屜式的彈窗做width=100%,height=auto的處理,這個要如何實現,就是要通過我們在imageGenerator中引入的imageData。
【2】我們的文章顯示中,引入了文件管理的微服務,因此,文章中圖片的鏈接都是跨域的,所以,必須打開html2Canvas的跨域選項,在封裝的組件里,我是通過一共一個defaultOptions來實現這一點的。
這個選項可以在轉換場景提供,也可提供一系列的默認值,最常用的除跨域外,還有是否允許log輸出等開關,大家感興趣可以自行查閱html2Canvas的官網。
內容比較簡單,大家如果有這個應用場景,可以參考實現一下,有問題歡迎大家隨時交流。謝謝大家的支持。
這里是云端源想IT,幫你輕松學IT”
嗨~ 今天的你過得還好嗎?
無論種子散落在何處
都會長出一棵樹
向著天空,掙扎生長
- 2024.03.15 -
HTML圖片標簽和超鏈接標簽是網頁開發中常用的兩種標簽,它們分別用于在網頁中插入圖片和創建超鏈接。
我們每天都在互聯網世界中與各種形式的信息打交道。你是否好奇過,當你點擊一篇文章中的圖片或鏈接時,是什么神奇的力量讓你瞬間跳轉到另一個頁面?
今天,就讓我們一起揭開HTML圖片標簽和超鏈接標簽的神秘面紗。
HTML圖片標簽是一種特殊的標記,它可以讓網頁顯示圖像。通過使用圖片標簽,我們可以在網頁上展示各種圖片,從而讓網頁更加生動有趣。
1、語法結構
HTML圖片標簽的語法結構非常簡單,只需要使用<img>標簽,并在其中添加src屬性,指定圖片的路徑即可。
例如:
<img src="image.jpg" alt="描述圖片的文字">
2、圖片格式
HTML支持多種圖片格式,包括JPEG、PNG、GIF等。不同的圖片格式具有不同的特點,可以根據需要選擇合適的格式。
3、圖片屬性
除了src屬性外,HTML圖片標簽還有其他一些常用的屬性,如:
4、網絡圖片的插入
當需要插入網絡上的圖片時,可以將圖片的URL地址作為src屬性的值。例如:
<img src="https://www.example.com/images/pic.jpg" alt="示例圖片">
5、本地圖片的插入
當需要插入本地圖片時,可以將圖片的相對路徑或絕對路徑作為src屬性的值。
6、相對路徑與絕對路徑
在這里再給大家介紹兩個概念,相對路徑與絕對路徑,搞懂它們,我們在插入本地圖片時也能得心應手。
相對路徑:
相對于當前HTML文件所在目錄的路徑,包含Web的相對路徑(HTML中的相對目錄)。例如,如果圖片文件位于與HTML文件相同的目錄中,可以直接使用文件名作為路徑:
<img src="pic.jpg" alt="本地圖片">
絕對路徑:
圖片文件在計算機上的完整路徑(URL和物理路徑)。例如:
<img src="C:/Users/username/Pictures/pic.jpg" alt="本地圖片">
超鏈接標簽是HTML中另一個重要的元素,它可以實現網頁之間的跳轉。通過使用超鏈接標簽,我們可以將文本、圖片等內容設置為可點擊的鏈接,方便用戶在不同頁面之間自由切換。
1、語法結構
超鏈接標簽使用<a>標簽表示,需要在href屬性中指定鏈接的目標地址。
<a href="目標地址" title="標題">文本內容</a>
例如:
<a href="https://www.ydcode.cn/">點擊訪問示例網站</a>
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網站</title>
</head>
<body>
<h1>歡迎來到云端源想!</h1>
<p>這是一個簡單的HTML頁面,用于展示一個網站的結構和內容。</p>
<a href="https://www.ydcode.cn/">點擊訪問示例網站</a>
</body>
</html>
2、鏈接目標
超鏈接可以鏈接到不同的目標,包括其他網頁、電子郵件地址、文件下載等。通過設置href屬性的值,可以實現不同的鏈接目標。
3、鏈接屬性
超鏈接標簽還有一些其他常用的屬性,如:
想要快速入門前端開發嗎?推薦一個前端開發基礎課程,這個老師講的特別好,零基礎學習無壓力,知識點結合代碼,邊學邊練,可以免費試看試學,還有各種輔助工具和資料,非常適合新手!點這里前往學習哦!云端源想
4、錨點鏈接標簽
錨點標簽用于在網頁中創建一個可以點擊的錨點,以便用戶可以通過點擊錨點跳轉到頁面中的其他部分。
錨點標簽的語法為:
<a name="錨點名稱"></a>
例如,可以在頁面中的一個段落前添加一個錨點:
<a name="section1"></a>
<p>這是一個段落。</p>
然后,可以在頁面的其他位置創建一個指向該錨點的超鏈接:
<a href="#section1">跳轉到第一節</a>
當用戶點擊“跳轉到第一節”鏈接時,頁面將滾動到名為“section1”的錨點所在的位置。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網站</title>
</head>
<body>
<h1>歡迎來到云端源想!</h1>
<p><a href="#section1">跳轉到第一節</a></p>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<p>這是第三個段落。</p>
<a name="section1"></a>
<p>這是第一節的內容。</p>
</body>
</html>
HTML圖片標簽和超鏈接標簽是構建網頁的兩個重要元素,它們不僅豐富了網頁的內容,還為網頁添加了動態和互動性。
通過學習和掌握這兩個標簽的使用方法,我們可以創建更加豐富和互動的網頁,為用戶提供更好的瀏覽體驗。無論是展示精美的圖片,還是實現頁面之間的跳轉,HTML圖片標簽和超鏈接標簽都能幫助我們實現更多的創意和功能。
讓我們一起探索HTML的奇妙世界,創造出更加精彩的網頁吧!
我們下期再見!
END
文案編輯|云端學長
文案配圖|云端學長
內容由:云端源想分享
*請認真填寫需求信息,我們會在24小時內與您取得聯系。