資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何將帶有過濾器的 HTML 元素儲存為影像？
元素的視覺效果由 filter 屬性控制。大多數情況下，此屬性用於影像內容，以更改影像的渲染、背景、邊框等。以下是 filter 屬性的語法 -
filter: none|blur()|brightness()|contrast()|drop-shadow()| grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()| url();
讓我們深入瞭解本文，以便更好地理解如何將帶有過濾器的 HTML 元素儲存為影像。
將帶有過濾器的 HTML 元素儲存為影像
可以使用 <img> 標籤將影像包含在 HTML 頁面中。影像連結到線上頁面；它們實際上並沒有放置到網頁中。相關的圖片由 <img> 標籤保留在適當的位置。<image> 標籤必須具有以下兩個屬性 -
src
alt
語法
以下是 <img> 標籤的語法 -
<img src="" alt="" width="" height="">
讓我們看看以下示例，以便更好地瞭解如何將帶有過濾器的 HTML 元素儲存為影像。
示例
在以下示例中，我們使用執行指令碼將帶有過濾器的 HTML 元素儲存為影像。
<!DOCTYPE HTML>
<html>
<body>
<style>
img {
width: 400px;
height: 400px;
}
</style>
<img src="https://tutorialspoint.tw/java/images/java-mini-logo.jpg" id="tutorial1" />
<canvas id="tutorial" width="400px" height="400px"></canvas>
<a id="tutorial2">Click To Download</a>
<script>
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.filter = "sepia(80%)";
var img = document.getElementById("tutorial1");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var downloadFile = document.getElementById('tutorial2');
downloadFile.addEventListener('click', download, false);
function download() {
var dt = canvas.toDataURL('image/jpeg');
this.href = dt;
};
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含上傳到網頁上的影像以及從原始影像和文字中獲得的應用了效果的影像。當用戶點選“下載”時，使用的效果將被儲存。
更新於: 2023年4月20日
770 次瀏覽
廣告