当前位置：首页 > jquery

jquery下载图片

2026-03-16 11:26:22jquery

使用jQuery下载图片的方法

方法一：通过创建隐藏的<a>标签触发下载

动态创建一个隐藏的<a>标签，设置其href为图片URL，并添加download属性。通过jQuery触发点击事件实现下载。

function downloadImage(url, filename) {
  $('<a>', {
    href: url,
    download: filename || 'image.jpg'
  }).appendTo('body').get(0).click().remove();
}

// 调用示例
downloadImage('https://example.com/image.jpg', 'myImage.jpg');

方法二：结合Canvas处理跨域图片

jquery下载图片

当遇到跨域图片时，可以先通过Canvas绘制图片，再转换为可下载的数据URL。

function downloadCrossOriginImage(url, filename) {
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    canvas.getContext('2d').drawImage(this, 0, 0);

    const a = document.createElement('a');
    a.href = canvas.toDataURL('image/png');
    a.download = filename || 'image.png';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  img.src = url;
}

方法三：通过Blob对象下载

jquery下载图片

使用AJAX获取图片数据后转换为Blob对象，创建对象URL实现下载。

function downloadViaBlob(url, filename) {
  $.ajax({
    url: url,
    xhrFields: { responseType: 'blob' },
    success: function(data) {
      const blobUrl = URL.createObjectURL(data);
      $('<a>', {
        href: blobUrl,
        download: filename || 'file.jpg'
      }).appendTo('body').get(0).click();
      setTimeout(() => {
        URL.revokeObjectURL(blobUrl);
      }, 100);
    }
  });
}

注意事项