vue实现非同源图片的下载功能--跨域问题(解决浏览器打开图片,而不是下载)

一、需求

我刚接到需求的时候,思维比较混乱。
需求:在xxx页面添加批量下载xxxx图片功能。给了后端返回的图片url。

二、思路

初始思路是使用a标签的download属性
下载图片的具体实现效果demo,点击链接:https://www.w3school.com.cn/tiy/t.asp?f=html_a_download
效果图:


vue实现非同源图片的下载功能--跨域问题(解决浏览器打开图片,而不是下载)_第1张图片


注意!!!

download 是 a 标签 html5 的新属性,可以点击下载文件。初次使用,经常出现无法点击的情况,可能有以下原因,排除下:

解决方案:

  • 必须设置 href 属性,download 才起作用;
  • download 属性是文件名,href 属性,指向的是要下载的文件;
  • href 的指向需要同源,跨域下载不下来,当然可以通过其他方案,比如把图片传到自己后台,再返回同源的路径;

三、完成

a标签的download属性 只适用于同源的图片,如果是 非同源图片,a标签的download属性下载的图片会在浏览器中打开。 html代码生成 canvas 然后生成图片。但是html里面的图片路径必须用base64。解法如下:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
body>
<script>
    var imgSrc = 'https://profile.csdnimg.cn/2/C/7/3_wangbadandzy'
    var name = "测试图片"

    function downloadPicture(imgSrc, name) {
      
        const image = new Image()
            // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = () => {
      
            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/jpg')
            const a = document.createElement('a')
            a.download = name || 'phone'
            a.href = url
            a.click()
            a.remove()
        }
        image.src = imgSrc
    }
    downloadPicture(imgSrc)
script>

html>

其中,下载的图片可能遇到了“网络错误”,没有完成下载。使用 Blob 解决。

最终代码


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
body>
<script>
    var imgSrc = 'https://profile.csdnimg.cn/2/C/7/3_wangbadandzy'
    var name = "测试图片"

    function downloadPicture(imgSrc, name) {
      
        const image = new Image()
            // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = () => {
      
            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)
            canvas.toBlob((blob) => {
      
                const url = URL.createObjectURL(blob)
                const a = document.createElement('a')
                a.download = name || 'photo'
                a.href = url
                a.click()
                a.remove()
                URL.revokeObjectURL(url)
            })
        }
        image.src = imgSrc
    }
    downloadPicture(imgSrc, name)
script>

html>

结语,这个函数可以直接拿去用,vue的解决方式和js相同。

四、链接

学习图片下载的链接:
  • vue.js如何根据后台返回来的图片url进行图片下载:https://www.cnblogs.com/zhujiqian/p/11475467.html

你可能感兴趣的:(前端,前端实战项目)