数据结构
网络
关系数据库管理系统
操作系统
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.com/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 次浏览
广告