HTML+JS 实现图片下载到本地

Posted ITDCL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML+JS 实现图片下载到本地相关的知识,希望对你有一定的参考价值。

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

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

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

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

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‘)
}

 

以上是关于HTML+JS 实现图片下载到本地的主要内容,如果未能解决你的问题,请参考以下文章

怎么把弄到js文件里

js保存图片到手机

js 保存图片到本地

js中如何将某地址的图片保存到本地指定文件夹中

我用js在网页画了一张图片(就把图片拼凑起来),现在想把它直接生成一张图片自动保存到本地,怎么实现?

angularJS使用ocLazyLoad实现js延迟加载