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

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

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

根据路径下载

思路:

  1. 通过new Image()对象, src赋予路径
  2. 监听将Image对象onload事件, 画在canvas上,
  3. 再使用canvas.toDataURL转换为base64格式(可设置图片类型和图片质量),
  4. 构建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()
	}
上传预览后下载

思路:

  1. 通过input标签, type=file
  2. 监听change事件, 通过事件对象拿到图片的file对象(e.target.files)
  3. new FileReader读取文件
  4. 调用FileReaderreadAsDataURL方法
  5. FileReader对象的onload事件拿到转换后的base64格式
  6. 赋予图片标签src预览
  7. 构建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 
    });
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值