如何将带有滤镜的 HTML 元素保存为图片?

htmlweb developmentfront end technology更新于 2024/4/22 1:16:17

元素的视觉效果由 filter 属性控制。大多数情况下，此属性用于更改图片内容的渲染、背景、边框等。以下是 filter 属性的语法 -

filter: none|blur()|brightness()|contrast()|drop-shadow()|
grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|
url();

让我们深入研究本文，以便更好地了解如何将带有滤镜的 HTML 元素保存为图片。

将带有滤镜的 HTML 元素保存为图片

可以使用 <img> 标签将图片添加到 HTML 页面中。图片链接到在线页面;它们实际上并没有被放置到网页中。相关图片由 <img> 标签固定。<image> 标签必须具有以下两个属性 -

语法

以下是 <img> 标签的语法 -

<img src="" alt="" width="" height="">

让我们查看以下示例，以了解更多关于如何将带有滤镜的 HTML 元素保存为图像的信息。

示例

下面我们将运行脚本将带有滤镜的 HTML 元素保存为图像。

<!DOCTYPE HTML>
<html>
   <body>
      <style>
         img {
            width: 400px;
            height: 400px;
         }
      </style>
      <img src="https://www.cainiaomax.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>

脚本执行后，将生成一个输出，其中包含一张已上传到网页的图片，以及一张应用了原始图片和文本效果的图片。当用户点击"下载"时，所使用的效果将被保存。