图片下载/预览简单实现 , 以及FileReader转换文件的方法

本文链接：https://blog.youkuaiyun.com/zdhanunity/article/details/97371767

本文介绍了如何使用JavaScript根据图片路径进行下载，以及在上传预览后如何下载图片。通过创建对象URL，监听事件并在canvas上绘制图片，然后转换为指定格式和质量，构建下载链接。同时，利用FileReader读取文件并转换，实现预览功能。最后，提供了简单的FileReader使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据路径下载

思路:

通过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 
    });
})