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')
    }
  • 相关阅读:
    HLG 1522 子序列的和【队列的应用】
    POJ 3273 Monthly Expense【二分】
    HDU 4004 The Frog's Games 【二分】
    POJ 2001 Shortest Prefixes【第一棵字典树】
    POJ 2823 Sliding Window【单调对列经典题目】
    HDU 1969 Pie 【二分】
    POJ 3125 Printer Queue【暴力模拟】
    POJ 3250 Bad Hair Day【单调栈】
    字典树【模板】
    验证码 Code
  • 原文地址:https://www.cnblogs.com/liucailing/p/12787575.html
Copyright © 2011-2022 走看看