html5实现图片预览和查看原图

最新推荐文章于 2024-03-28 15:13:27 发布
最新推荐文章于 2024-03-28 15:13:27 发布
阅读量1.5w 收藏 4
点赞数 5
文章标签： javascript filereader html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bsj911gtaaa/article/details/45895079
版权

html5从一开始就给开发者很多的期待，提供众多新的API，不用再想以前一样，为了实现某个功能写很多的代码。在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web端的js是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比如有两个文件夹，一个是临时文件夹，一个是正式文件夹，临时文件夹会定时进行清理，正式文件夹是用户确认使用的图片存储的位置。

1. fileReader

现在html5提供的API不再让图片预览那么麻烦，FileReader提供了很多的方法来进行图片预览和文本读取，同时也提供了一整套完整的事件来捕获文件的状态，如下：

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

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

FileReader接口事件 FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

事件 描述
最低0.47元/天 解锁文章
蚊子0_0
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS前端HTML5图片预览手势缩放
07-21
极简调用： 多图预览 function photoPreview(items) { var items = [{ src: "1.jpg", w: 1920, h: 1080, title: "第一张图片的提示" },{ src: "2.jpg", w: 1024, h: 768, title: "第二张图片的提示" },{ src: "3.jpg", w: 800, h: 600, title: "第三张图片的提示" }]; openPhotoSwipe(items); }
H5 实现图片可预览缩放等操作(对库 react-photo-view 的封装和使用)
yiguoxiaohai的博客
08-08 1363
H5 实现图片可预览放大等操作对库 react-photo-view 的封装和使用。例如，Taro 实现的 H5，Taro对外的提供的预览图片没有放大功能，需要自己重新封装
点击图片预览 代码记录贴
最新发布
weixin_54239638的博客
03-28 321
【代码】点击图片预览 代码记录贴。
实时显示从file输入框中打开的图片C:\fakepath问题
qq_33390613的博客
03-20 912
一、问题产生原因1、今天维护公司项目，需要修改一个上传图片显示的问题，就是实时显示一个从file input上传的图片问题，以下是demo：[html] view plain copy<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title
base64图片转file的处理
m0_50663823的博客
07-12 7945
base64图片转file的处理
利用html做一个3D 图片动态效果
zghn6832的博客
11-30 3166
插一条：如果有人想要一些好玩的脚本（vbs，bat，html）同样联系我邮箱。如有侵权请联系352648773@qq.com邮箱。在倒数第6行src=后是图片地址 可以自行更改。今天分享一个3D图片动态效果。
HTML inputFile实现头像上传
qq_41533659的博客
01-13 1045
C#结合HTML实现图片上传 效果预览 HTML <table> <tr> <td rowspan="5" style="background:#ffffff"> <div style="height:140px;width:140px;border-radius:50px;text-align:center;margin:0 auto;">
html+css实现自定义图片上传按钮
qf2019的博客
03-25 325
普通的input[type=‘file’]的效果很朴素 以自定义一个file选择文件的按钮： 思路为： 用定位将自定义的按钮遮住原来的选择文件按钮， 再让点击自定义按钮时触发原来的选择文件按钮的事件即可 （对此，label可实现） 对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基.
JS+HTML5实现上传图片预览效果
06-13
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
JS实现图片剪裁并预览效果
10-21
在本文中，我们将探讨如何使用JavaScript（JS）实现图片剪裁并预览的效果。这个功能在许多Web应用中非常常见，例如在线头像编辑或照片编辑工具。我们将详细介绍实现这一功能的关键步骤和技术。 首先，我们需要创建...
原生js FileReader对象实现图片上传本地预览效果
12-09
本文实例为大家分享了js实现图片上传本地预览效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
jquery实现图片上传前本地预览功能
10-22
总结，通过结合HTML、CSS和jQuery，我们可以轻松实现图片上传前的本地预览功能。这个功能在个人资料编辑、产品图片上传等场景中非常实用。如果需要了解更多关于jQuery的上传操作或Ajax上传技术，可以参考相关的教程...
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
12-14
　图片预览、图片还原（返回原图、返回处理图）； 　图片上传（获取签名、上传图片）。 2.核心逻辑 　2.1图片裁剪 　获取裁剪框（矩形）相对于画布的位置（左上）和裁剪框的height、width。获取（getImageData）...
css学习：轮播图
m0_56424512的博客
11-29 1855
css学习
html中利用js实现简单图片轮换效果
热门推荐
fang0609的博客
08-06 1万+
图片轮播 window.onload = function() { flag = 0; obj1 = document.getElementById("slider"); obj2 = document.getElementsByTagName("li"); obj2[0].style.backgroundColo
自定义View实现HTML图文环绕效果
gundumw100的专栏
04-10 453
Android中并没有提供HTML图文环绕效果的View，最接近的算是TextView中的ImageSpan了，但并未完全实现图文环绕（图文混排）的效果。 1、Android系统TextView的ImageSpan实现图文环绕 代码如下： TextView tv = new TextView(this); SpannableString spanStr = new S
HTML5 实现本地图片裁剪
Deng872347348的博客
10-27 4199
HTML5 实现本地图片裁剪 文章目录HTML5 实现本地图片裁剪1.知识点1.HTML 结构与 CSS 样式2.初始化3 实现 handleFiles，获取文件，读取文件并生成 url4.实现 paintImage 方法5 实现 cutImage 方法6 编写 drag 方法7 保存截图8 完整 js 代码 这次小的案例是利用 HTML5 的 canvas 技术，结合 HTML5 的 File API 来实现图片的本地裁剪，从一个大图片中选取裁剪区域， 1.知识点 canvas JavaScript
【html】制作一个能生成图片的markdown在线编辑器
TA远方
05-22 2084
markdown是什么，为什么大家都会用它呢，如果你想写文章，写文档，写作，用markdown是最好的选择，它是一个很好用的文档排版工具，觉得好用，何不尝试把它弄下来做成自己的呢，接下来给讲一讲如何制作一个纯网页的markdown在线编辑器，可随时随地用它写稿件。
viewer.js实现移动端h5点击图片预览缩放
lruri_wss的博客
01-12 2281
viewer.js实现h5点击图片预览缩放 1.引入文件js和css <link href="~/Assets/css/viewer.css" rel="stylesheet" /> <script src="~/Assets/lib/viewerjs/viewer.js"></script> 引用的文件是分js版本和jquery版本的，下面使用的是js版本的； 需求：点击某张图片可以弹出大图进行预览和缩放 2.创建页面容器 <img id="hi
vue3加原生canvas实现抖音头像抠图和预览
06-10
好的，下面是基于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、付费专栏及课程。

余额充值