JavaScript点击按钮下载图片，涉及同源下载和跨域下载

最新推荐文章于 2025-07-13 18:16:04 发布

转载最新推荐文章于 2025-07-13 18:16:04 发布 · 2.5k 阅读

文章标签：

#Javascript

js爬坑系列专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在网页中实现跨域图片下载的方法，通过创建canvas元素和利用toBlob方法，将图片转换为Blob对象进行下载，解决了跨域限制导致的直接下载失败问题。

以下内容适用于同源下载图片：

参考：https://blog.youkuaiyun.com/Thea12138/article/details/82801375

<button class="download" onclick=" download('url')">
              <i class="layui-icon layui-icon-download-circle"></i>
 </button>

function download(src) {
    var $a = document.createElement('a');
    $a.setAttribute("href", src);
    $a.setAttribute("download", "");
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
    $a.dispatchEvent(evObj);
}

对于跨域的图片，使用上述方法只会打开一个新窗口显示要下载的图片，不会打开下载窗口，下载方法如下：

参考：https://segmentfault.com/q/1010000017159631

https://blog.youkuaiyun.com/visionke/article/details/84583105

    function ddd(){        
        var src = 'http://pic.c-ctrip.com/VacationH5Pic/mice/wechat/ewm01.png';
        var canvas = document.createElement('canvas');
        var img = document.createElement('img');
        img.onload = function(e) {
            canvas.width = img.width;
            canvas.height = img.height;
            var context = canvas.getContext('2d');
            context.drawImage(img, 0, 0, img.width, img.height);         
            canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob((blob)=>{
                let link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = 'aaa'; 
                link.click();  
            }, "image/jpeg");           
        }
        img.setAttribute("crossOrigin",'Anonymous');
        img.src = src;
    }