zoukankan      html  css  js  c++  java
  • HTML+JS 实现图片下载到本地

    原理:download 属性是HTML5中新增的 <a> 标签属性。能够让我们指定浏览器下载文件时的默认名称。将download属性添加到<a>链接上,当我们点击这个链接,download属性值里的名称会显示到弹出的下载框里,而且download属性能够强制触发下载操作。

    方法一:通过<a>链接实现图片下载

    <a href="download.png" download="preview">
      <img src="download.png" alt=""/> </a>

    方法二:通过JS触发<a>链接实现图片下载

    <div class="downImageBtn">下载图片</div> 

    document.querySelector('.downImageBtn').addEventListener('click',function(){ downloadIamge('.downImageBtn', '图片的名称') }) function downloadIamge(selector, name) { var image = new Image() // 解决跨域 Canvas 污染问题
      // crossorigin 是HTML5中新增的<img>标签属性
      // crossorigin属性有两个值可选:
      //anonymous:如果使用这个值的话就会在请求中的header中的带上origin属性,但请求不会带上cookie和其他的一些认证信息。
      //use-credentials:这个同时会在跨域请求中带上cookie和其他的一些认证信息。
    在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。可以通过server的配置文件来开启这个属性:server开启Access-Control-Allow-Credentials
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function () {
            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)
            var url = canvas.toDataURL('image/png')
            // 生成一个a元素
            var a = document.createElement('a')
            // 创建一个单击事件
            var event = new MouseEvent('click')
    
            // 将a的download属性设置为我们想要下载的图片名称,若name不存在则使用‘下载图片名称’作为默认名称
            a.download = name || '下载图片名称'
            // 将生成的URL设置为a.href属性
            a.href = url
    
            // 触发a的单击事件
            a.dispatchEvent(event);
        }
        image.src = document.querySelector(selector).getAttribute('src')
    }
  • 相关阅读:
    02 nginx 进程结构_热部署_nginx虚拟主机
    Go基础
    01 nginx 概述及安装
    项目--微信小程序
    小程序框架
    常用数据集合
    看正月点灯笼老师的笔记—线段树
    并查集—汇总
    看正月点灯笼老师的笔记—qsort 和 bsearch
    看正月点灯笼老师的笔记—BFS和DFS ( 3 )
  • 原文地址:https://www.cnblogs.com/liucailing/p/12787575.html
Copyright © 2011-2022 走看看