根据路径下载
思路:
- 通过
new Image()
对象,src
赋予路径 - 监听将
Image
对象onload
事件, 画在canvas
上, - 再使用
canvas.toDataURL
转换为base64
格式(可设置图片类型和图片质量), - 构建
a
标签, 点击a
标签下载(a
标签需要设置download
属性)
// 新建canvas对象, 取到2d画布
var canvas = document.getElementsByTagName('canvas')[0]
var ctx = canvas.getContext('2d')
// 新建图片
var Img = new Image()
Img.src = "a.png"
// 转换为 base64
Img.onload = function () {
canvas.width = Img.width
canvas.height = Img.height
ctx.drawImage(Img, 0, 0, canvas.width, canvas.height)
var base = canvas.toDataURL('image/png')
var $a = document.createElement('a')
$a.setAttribute('href', base)
$a.setAttribute('download', 'downloadImg')
document.getElementById('download').click()
}
上传预览后下载
思路:
- 通过
input
标签,type=file
- 监听
change
事件, 通过事件对象拿到图片的file
对象(e.target.files
) new FileReader
读取文件- 调用
FileReader
的readAsDataURL
方法 - 在
FileReader
对象的onload
事件拿到转换后的base64
格式 - 赋予图片标签
src
预览 - 构建
a
标签, 点击a
标签下载
下面随便写一下
<img id="img" src="" alt="">
<input id="file-select" type="file" placeholder="请选择图片">
<button>下载</button>
<script src="a.js"></script>
var $input = document.getElementById('file-select')
var src = ''
$input.addEventListener('change', function (e) {
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = function (ev) {
var imgEle = document.getElementById('img')
imgEle.setAttribute('width', '200')
imgEle.setAttribute('height', '100')
imgEle.src = ev.target.result
src = imgEle.src
}
})
function download() {
var el = document.createElement('a')
el.setAttribute('href', src)
el.setAttribute('download', 'test')
el.click()
}
var btn = document.getElementsByTagName('button')[0]
btn.addEventListener('click', download)
粗糙的效果:
FileReader
FileReader 接收 File 或 Blob 对象
fr.readAsDataURL(); //result属性中将包含一个data:URL格式的字符串, 文本文档也可以转换为 base64
fr.readAsBinaryString() //result属性中将包含所读取文件的原始二进制数据
fr.readAsText() //result属性中将包含一个字符串以表示所读取的文件内容
fr.readAsArrayBuffer() //result 属性中保存的将是被读取文件的
(function(){
var dataUrl;
var file = document.querySelector('input.upload').files[0];
var fr = new FileReader();
fr.readAsDataURL(); //result属性中将包含一个data: URL格式的字符串, 文本文档也可以转换为 base64
//fr.readAsBinaryString() //result属性中将包含所读取文件的原始二进制数据
//fr.readAsText() //result属性中将包含一个字符串以表示所读取的文件内容
//fr.readAsArrayBuffer() //result 属性中保存的将是被读取文件的
fr.onload(function(){ //文件读取成功回调
dataUrl = fr.result; //result属性为data:URL格式,与读取方式有关
document.querySelector('img.previewImg').src = dataUrl
});
})