• a标签-跨域-下载


    原因:服务器存放图片的地址发生了变更
    现象:a标签做的下载图片操作无法使用,会直接打开进行预览
    解决:
    先将图片转为base64格式然后在进行下载,封装了两个方法,具体看注释

    页面代码如下
    <Button @click=downImg('https://xxx/xxx/xxx.png')>下载</Button>
    downImg (url) {
    const img = document.createElement('img')
    img.crossOrigin = 'Anonymous' // 作用:可以跨域。这里一定要注意顺序不能写在下面,不然会报画布被污染的错误
    // 即:Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    img.src = url
    img.onload = () => {
    // 调取封装的转base64的方法
    const dataBase64 = getBase64Image(img)
    // 做a标签的下载处理
    clickDown(dataBase64, '二维码')
    }
    }


    ========================以下封装的方法
    /**
    *
    * a标签下载设置
    * @param
    * 第一个参数为下载的地址
    * 第二个参数为下载之后的文件名,不传为默认为空
    * @return 直接下载
    *
    *
    * */
    export function clickDown (url, name = '') {
    const link = document.createElement('a')
    link.href = url
    link.download = name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    }

    /**
    *
    * 将图片转为base64格式
    * @param 图片对象
    * @return base64字符串
    *
    * */
    export function getBase64Image (img) {
    if (!img) return
    let canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0, img.width, img.height)
    let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
    return canvas.toDataURL('image/' + ext)
    }

  • 相关阅读:
    实验四 代码审查
    结对编程——阶段二
    实验二—结对编程第一环节
    实验一 GIT 代码版本管理
    实验五 单元测试
    实验四 代码评审
    实验三 UML建模工具的安装与使用
    实验二 结对编程第二阶段
    实验二 结对编程——第一阶段
    软件工程 实验一 GIT代码版本管理
  • 原文地址:https://www.cnblogs.com/victory820/p/10936240.html
Copyright © 2020-2023  润新知