前端通过链接下载图片

最新推荐文章于 2024-06-10 10:39:20 发布

原创最新推荐文章于 2024-06-10 10:39:20 发布 · 676 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webview #html

这个示例展示了如何通过JavaScript的fetch API从URL获取图片数据，并将其保存为本地的JPEG文件。首先，fetch请求图片资源，然后将响应转换为blob，最后通过创建一个隐藏的a标签并模拟点击来触发下载。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                                <script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
        </head>
        <body>
                <img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQE_7zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyWXJrd1pQREFjWUMxajZaWHh5Y1kAAgS2L3tiAwQQDgAA" alt="">

                <a id="a" href=""></a>
                <div onclick="download('https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQE_7zwAAAAAAAAAAS5odHRwOi8vd2VpeGluLnFxLmNvbS9xLzAyWXJrd1pQREFjWUMxajZaWHh5Y1kAAgS2L3tiAwQQDgAA','aa.jpg')">下载</div>
        </body>
        <script>

                function download(url,name) {
                       // fetch抓取图片数据
                       fetch(url).then(response=> {

                           if( response.status == 200 )
                               // 返回的.blob()为promise，然后生成了blob对象，此方法获得的blob对象包含了数据类型，十分方便
                               return response.blob()
                           throw new Error(`status: ${response.status}.`)
                       }).then(blob=> {
                           // 获取到blob对象
                           downloadFile(name, blob)
                       }).catch(error=> {
                           console.log("failed. cause:", error)
                       })
                   }
                   function downloadFile(fileName, blob) {
                           console.log(blob)
                           console.log(fileName)
                          const anchor = document.getElementById("a")
                          // 创建指向blob对象地址
                          const src = URL.createObjectURL(blob)
                          anchor.download = fileName
                          anchor.href = src
                                  anchor.click()
                   }

        </script>
</html>