imgshow

使用readAsDataURL方法预览图片

由 北城余情 提交于 2020-11-25 07:12:34
使用FileReader接口的readAsDataURL方法实现图片的预览。 　在FileReader出现之前，前端的图片预览是这样实现的：把本地图片上传到服务器，服务器把图片地址返回，并把它替换到图片元素的src属性。 这种方法的缺点是：必须要先把图片上传到服务器。那么问题来了，如果上传的图片很大，而网速又很慢，这就需要等待很久预览图片才会显示出来了，而且，如果用户预览图片后发现不太满意，想重新选择一张图片，这时候还要把已经上传到服务器上的图片给删除掉。 自从有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，并且JS操作本地文件已经成为了可能。这种方法的思路是：通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的，可以看一下这里： FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader 下面是使用FileReader进行图片预览的简单demo： <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1

JS 点击缩略小图， 显示对应的大图

由 回眸只為那壹抹淺笑 提交于 2020-05-08 19:56:14
有时候我们绑定图片 到界面上 宽高设置的很小， 如果点击放大图片看，我们可以使用js来操作 一. html 代码 这是一个显示你大图片的容器， 你可以自己调一些相关的样式， z-index 是透明度，设置越大，就在最上层显示（会有遮罩） <div id="outerdiv" style="position:absolute;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none; z-index:8888"> 　　<div id="innerdiv" style="position:absolute;"> 　　　　<img id="bigimg" @*style="border:1px solid #fff;"*@ src="" /> 　　</div> </div> 二 js代码，直接复制就可以用了 注意： img里面的点击事件给自己 onclick=“ pimg($（this）) ” <img src="image/tupian.pan" onclick=" pimg($(this)) " /> function pimg(e) { var _this = e;//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "
订阅 imgshow