原理：download 属性是HTML5中新增的 <a> 标签属性。能够让我们指定浏览器下载文件时的默认名称。将download属性添加到<a>链接上，当我们点击这个链接，download属性值里的名称会显示到弹出的下载框里，而且download属性能够强制触发下载操作。
方法一：通过<a>链接实现图片下载
<a href="download.png" download="preview"><img src="download.png" alt=""/>
</a>
方法二：（已试，有效）
HTML：
<div class="downImageBtn">下载图片</div>
js：
document.querySelector('.downImageBtn').addEventListener('click',function(){downloadIamge('.downImageBtn', '图片的名称')
})
//不用js添加click方法，就用onclick再HTML中添加，如下：
//<div class="downImageBtn" onclick='downloadIamge()'>下载图片</div> 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-Credentialsimage.setAttribute('crossOrigin', 'anonymous')image.onload = function () {var canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightvar 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')
}