前端下载图片

最新推荐文章于 2025-07-03 18:10:27 发布

转载最新推荐文章于 2025-07-03 18:10:27 发布 · 1.5k 阅读

文章标签：

#前端 #下载图片

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的网页图片下载器的实现方法，通过JavaScript操作canvas来完成跨域图片的下载。该下载器能够指定图片名称，并自动处理图片加载及下载流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset='utf-8'>
  <title></title>
</head>
<body>
  <h3>测试下载图片</h3>
  <img id='images' src='http://cdnadm.waduobao.cn/FhfnAkcjBRZYgodmXHsfwZPdIstr' alt='' width='30'>
  <script>
    function downloadImage(selector,name){
      const image = new Image();
      // 解决跨域 canvas 污染问题
      image.setAttribute('crossOrigin','anonymous');
      image.onload = function(){
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext('2d');
        context.drawImage(image,0,0,image.width,image.height);
        const url = canvas.toDataURL('image/png');
        // 生成一个 a 标签
        const a = document.createElement('a');
        // 创建一个点击事件
        const event = new MouseEvent('click');
        // 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
        a.download = name || '图片';
        // 将生成的 URL 设置为 a.href 属性
        a.href = url;
        // 触发 a 的点击事件
        a.dispatchEvent(event);
      };
      image.src = document.getElementById(selector).src
    }
    // 调用方式
    // 参数一： 选择器，代表 img 标签
    // 参数而： 图片名称，可选
    downloadImage('images','图片名称');
  </script>
</body>