用HTML5 实现图片预览和查看原图的功能

FileReader接口事件

FileReader接口捕获读取文件时的状态对应的事件模型如下。

事件描述
onabort中断
onerror出错
onloadstart开始
onprogress正在读取
onload成功读取
onloadend读取完成,无论成功失败


FileReader接口有4个函数,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,函数并不会返回读取结果,这一结果存储在result属性中。

方法名参数描述
readAsBinaryStringfile将文件读取为二进制编码
readAsTextfile[, encoding]按照格式将文件读取为文本,encode默认为UTF-8
readAsDataURLfile将文件读取为DataUrl
abort(none)终端读取操作

FileReader接口事件

FileReader接口捕获读取文件时的状态对应的事件模型如下。

事件描述
onabort中断
onerror出错
onloadstart开始
onprogress正在读取
onload成功读取
onloadend读取完成,无论成功失败

2.  fileReader 读取图片

我们大致了解了fileReader提供哪些方法和事件,不过本文主要是讲解图片的读取,那么我们就是用readAsDataURL()就可以了。不过,在进行这一切之前,我们必须检测当前的浏览器是否支持HTML5的fileReader,别进行了一系列的处理和操作,结果js报错,说fileReader没有被定义。

 
  1. if(!(window.FileReader && window.File && window.FileList && window.Blob)){
  2. show.innerHTML = ‘浏览器不支持fileReader‘;
  3. upimg.setAttribute(‘disabled‘, ‘disabled‘);
  4. return false;
  5. }

好的,让我们先看下demo:【

点击这里

2.1 fileReader读取单张图片

用input[type=file]控件读取文件,然后监听这个控件的change事件,若文件个数大于零,那么就进行下一步的操作:

 
  1. <input type="file" id=‘upimg‘ />
  2. var upimg = document.querySelector(‘#upimg‘);
  3. upimg.addEventListener(‘change‘, function(e){
  4. var files = this.files;
  5. if(files.length){
  6. // 对文件进行处理,下面会讲解checkFile()会做什么
  7. checkFile(this.files);
  8. }
  9. });

现在我们选取一张图片,针对选取的这张图片,我们使用fileReader进行图片的处理

 
  1. // 图片处理
  2. function checkFile(files){
  3. var file = files[0];
  4. var reader = new FileReader();
  5. // show表示<div id=‘show‘></div>,展示图片预览
  6. if(!/image\/\w+/.test(file.type)){
  7. show.innerHTML = "请确保文件为图像类型";
  8. return false;
  9. }
  10. // onload异步操作
  11. reader.onload = function(e){
  12. show.innerHTML = ‘<img src="‘+e.target.result+‘" alt="img">‘;
  13. }
  14. reader.readAsDataURL(file);
  15. }

现在,就可以在页面上看到图片了。

2.2 fileReader读取多张图片

和单张图片的处理过程很相似,但是也还是有区别的,因为reader.onload()是一个异步的操作,进行下一步的操作时必须在这个方法里,代码如下:

 
  1. <input type="file" id=‘upimg‘ multiple />
  2. // change事件没有改动
  3. // 图片处理
  4. function checkFile(files){
  5. var html=‘‘, i=0;
  6. var func = function(){
  7. if(i>=files.length){
  8. // 若已经读取完毕,则把html添加页面中
  9. show.innerHTML = html;
  10. }
  11. var file = files[i];
  12. var reader = new FileReader();
  13.  
  14. // show表示<div id=‘show‘></div>,用来展示图片预览的
  15. if(!/image\/\w+/.test(file.type)){
  16. show.innerHTML = "请确保文件为图像类型";
  17. return false;
  18. }
  19. reader.onload = function(e){
  20. html += ‘<img src="‘+e.target.result+‘" alt="img">‘;
  21. i++;
  22. func(); //选取下一张图片
  23. }
  24. reader.readAsDataURL(file);
  25. }
  26. func();
  27. }

2.3 拖拽拉去图片

拖拽事件,采用的是HTML5中的drag和drop,本文不着重介绍这两个方法,仅仅是讲解如何使用。

首先,我们设置一块拖拽区域,告诉用户应该把图片拖拽到什么位置:

 
  1. <style>
  2. .drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}
  3. .drag_hover{background: #FAD6F9;}
  4. </style>
  5. <span class=‘drag‘ id="drag">拖拽区域</span>

然后,我们给drag区域绑定上拖拽事件

 
  1. var drag = document.getElementById(‘drag‘);
  2. drag.addEventListener(‘dragenter‘, function(e){
  3. // 拖拽鼠标进入区域时
  4. this.className = ‘drag_hover‘;
  5. }, false);
  6. drag.addEventListener(‘dragleave‘, function(e){
  7. // 拖拽鼠标离开区域时
  8. this.className = ‘‘;
  9. }, false);
  10. drag.addEventListener(‘drop‘, function(e){
  11. // 当鼠标执行‘放’的动作时,执行读取文件操作
  12. var files = e.dataTransfer.files;
  13. this.className = ‘‘;
  14. if (files.length != 0) {
  15. checkFile(files);
  16. };
  17. e.preventDefault();
  18. }, false)
  19. drag.addEventListener(‘dragover‘, function(e){
  20. // 当对象拖动到目标对象触发
  21. e.dataTransfer.dragEffect = ‘copy‘;
  22. e.preventDefault();
  23. }, false);

这里需要注意:

需要给dragover和drop添加阻止默认事件,否则浏览器会采用file:///的方式打开文件

。drop事件执行后就是进行checkFile(),后续的操作与使用input[type=file]的操作一样。

 

3. 点击查看原图

当我们点击图片查看原图时,需要知道图片的原始尺寸。可能你会想到使用img.width和img.height,对,这个确实能获取到图片的长和宽,但是,这个长和宽是经过css修饰后的,不是图片原始的尺寸。如果要获取图片的原始尺寸,我们可以在js中创建一个imgs对象,然后把那张图片的地址给了这个imgs对象,然后获取imgs对象的尺寸,这样就能获取到图片的原始尺寸了。

 
  1. var imgs = new Image();
  2. imgs.src = img.src; // 给新的img对象链接
  3. console.log(imgs.width, imgs.height);

而在HTML5中,我们不用再那么麻烦的创建一个无用的img对象了,直接使用给出的属性即可。

 
  1. console.log(img.naturalWidth); // 获取图片的原始的宽度
  2. console.log(img.naturalHeight); // 获取图片的原始的高度

获取到图片的原始尺寸后,就能做出‘查看原图’的效果了。

原文链接:

https://www.cps12345.com/css-html/750/

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是基于Vue3和原生Canvas实现抖音头像抠图和预览的代码示例: 1. 在Vue3中引入Canvas 在Vue3中,我们可以通过在template中添加canvas元素来引入Canvas,然后通过ref属性获取Canvas的实例。代码如下: ```html <template> <canvas ref="canvas"></canvas> </template> ``` 2. 实现头像抠图功能 首先,我们需要获取用户上传的头像图片,并创建一个新的Canvas元素来处理图片。代码如下: ```javascript import { ref } from 'vue' export default { setup() { // 获取Canvas实例 const canvasRef = ref(null) // 处理上传的图片 const handleImageUpload = (event) => { const file = event.target.files[0] if (file) { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { const img = new Image() img.src = reader.result // 创建新的Canvas元素 const canvas = canvasRef.value const ctx = canvas.getContext('2d') img.onload = () => { const width = img.width const height = img.height canvas.width = width canvas.height = height // 将图片绘制到Canvas中 ctx.drawImage(img, 0, 0, width, height) // 实现头像抠图功能 // ... } } } } return { canvasRef, handleImageUpload } } } ``` 接下来,我们需要实现头像抠图的功能。首先,我们需要使用Canvas的getImageData方法获取Canvas中的像素数据。代码如下: ```javascript // 获取Canvas中的像素数据 const imageData = ctx.getImageData(0, 0, width, height) const pixels = imageData.data ``` 然后,我们可以遍历像素数据,判断每个像素的透明度是否大于某个阈值,如果大于阈值则将该像素的透明度设为255,否则将透明度设为0。这样,就可以把头像部分的像素点都变成不透明的,从而实现头像抠图的效果。代码如下: ```javascript // 实现头像抠图功能 const threshold = 200 // 阈值 for (let i = 0; i < pixels.length; i += 4) { const alpha = pixels[i + 3] if (alpha > threshold) { pixels[i + 3] = 255 } else { pixels[i + 3] = 0 } } ctx.putImageData(imageData, 0, 0) ``` 3. 实现头像预览功能 最后,我们需要实现头像预览功能。首先,我们需要在template中添加一个img元素,用于展示处理后的头像。代码如下: ```html <template> <div> <input type="file" accept="image/*" @change="handleImageUpload"> <canvas ref="canvas"></canvas> <img ref="preview"> </div> </template> ``` 然后,我们需要在handleImageUpload方法中,将处理后的Canvas转换成DataURL,然后将其赋值给img元素的src属性,从而实现头像预览的效果。代码如下: ```javascript // 将Canvas转换成DataURL const dataURL = canvas.toDataURL() // 将处理后的头像展示在img元素中 const imgPreview = previewRef.value imgPreview.src = dataURL ``` 至此,基于Vue3和原生Canvas实现抖音头像抠图和预览的代码示例就完成了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值