文件下载---图片下载

最新推荐文章于 2023-10-17 10:48:34 发布

你吃香蕉吗？

最新推荐文章于 2023-10-17 10:48:34 发布

阅读量1.7k

点赞数

分类专栏： js 前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_47135993/article/details/121418142

版权

前端同时被 2 个专栏收录

29 篇文章 3 订阅

订阅专栏

18 篇文章 4 订阅

订阅专栏

文件下载系列

适用场景：

需求：点击直接下载图片文件，默认浏览器是直接打开图片的

<script>
    function downloadIamge(imgsrc, imgname) {
        var image = new Image()
            // img是可以跨域的，crossOrigin="anonymous"允许跨域
        image.setAttribute('crossOrigin', 'anonymous')
        image.src = imgsrc
        image.onload = function() {
            // 创建一个canvas画布，并设置其宽高为图片的宽高
            var canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            var context = canvas.getContext('2d')
                // 绘制图片
            context.drawImage(image, 0, 0, image.width, image.height)
                // 得到图片的base64编码
            var url = canvas.toDataURL('image/png')
            var a = document.createElement('a')
                // 名称设置
            a.download = imgname
                // 将生成的URL设置为a.href属性
            a.href = url
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }

    }
    downloadIamge('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F19%2F03%2F15%2F75076c485081d15ed9c224ad3e4ce4a1.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639883739&t=dcfce9de81127928d0a54c7db266465d', '测试')
</script>