前端图片预览方式

lily_wang 发布于2019-08-21 11:53 / 615人阅读

摘要：图片预览方法图片预览现在大多数基于提供的接口，而给我们提供了四个方法属性中二进制数据缓冲区属性中包含文件原始二进制数据属性中将包含一个格式的字符串以表示所读取文件的内容属性中将包含一个字符串以表示所读取的文件内容一其中要实现图片预览需要用这

图片预览方法

图片预览现在大多数基于HTML5提供的接口FileReader，而FileReader给我们提供了四个方法
1.readAsArrayBuffer： result属性中二进制数据缓冲区
2.readAsBinaryString： result属性中包含文件原始二进制数据
3.readAsDataURL： result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.
4.readAsText： result属性中将包含一个字符串以表示所读取的文件内容.

一：其中要实现图片预览需要用readAsDataURL这个方法会将图片转换成base64的模式。之后我们把base64的字符串赋值给img的src属性，就可以实现图片预览代码如下

//html
请选择一个图像文件：

//js
 var input = document.querySelector("#file_input");
    input.onchange = function(){
        readfile(input.files[0], (e)=>{
           var src = e.target.result;
           var img = new Image();
                img.src = src;
                document.body.appendChild(img);
            })
         }
         //将图片转换成base64形式
         function readfile(blob, callback){
            var reader = new FileReader();
            reader.onload = callback;
            reader.readAsDataURL(blob);
         }

二：我么还可以使用对象URL中的方法createObjectURL()来实现图片预览，代码如下

var input = document.querySelector("#file_input");
    input.onchange = function(){
        var img = new Image();
        img.src = window.URL.createObjectURL(input.files[0]);
        document.body.appendChild(img);
    }

三：我们还可以通过拖拽的方式来实现图片预览，代码如下

      //必须要禁止浏览器默认行为
      drop.ondragenter = function(e){
          e.preventDefault();
      }
      drop.ondragover = function(e){
          e.preventDefault();
      }
      drop.onleave = function(e){
          e.preventDefault();
      }
      drop.ondrop = function(e){
          e.preventDefault();
          //获取文件对象数组
          var fs = e.dataTransfer.files;
          var reader = new FileReader();
          reader.onload = function(e){
              var img = new Image();
              img.src = e.target.result;
              //图片宽度和高度设置成拖拽狂框一样
              img.width = drop.clientWidth;
              img.height = drop.clientHeight;
              drop.appendChild(img);
          }
          reader.readAsDataURL(fs[0]);
     }

GPU云服务器云服务器图片预览清空图片预览图片本地预览图片放大预览

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87248.html

JS魔法堂之实战：纯前端的图片预览

摘要：一前言图片上传是一个普通不过的功能，而图片预览就是就是上传功能中必不可少的子功能了。偶然从上找到纯前端图片预览的相关资料，经过整理后记录下来以便日后查阅。类型为，表示在读取文件时发生的错误，只读。一、前言　　图片上传是一个普通不过的功能，而图片预览就是就是上传功能中必不可少的子功能了。在这之前，我曾经通过订阅input[type=file]元素的onchange事件，一旦更改路径...

岳光 2019-08-21 10:36 评论0 收藏0
从前端界面开发谈微信小程序体验

本文由云+社区发表作者介绍：练小习，2011年加入搜狐，负责搜狐相册的产品策划与前端开发。2015年后加入腾讯 ISUX (社交用户体验设计部)，目前主要负责腾讯云的UI开发工作，专注于人机交互，有丰富的UI开发经验。这段时间有幸加入了一个关于微信小程序的项目开发组，从无到有的根据文档自行学习了小程序的开发过程，前面已经有几位前辈的文章珠玉在前，我这里就先从前端界面的开发方面谈一谈小程序以及我...

NoraXie 2019-08-23 14:23 评论0 收藏0
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

摘要：二编辑合成照片使用编辑压缩重设尺寸比例转成输出预览。三保存并上传照片提交数据到服务器需要服务器支持我跳过了。数据主要来自拍摄的照片，多用于移动端开发，端也会用到，此插件兼容主流浏览器，以下不支持。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端...

lmxdawn 2019-08-26 10:31 评论0 收藏0
移动端上传图片翻转的解决方案

摘要：后续过了几天，公司购置了几台全新的测试机，测试同学将系统在一台三星的机子上一测，又发现新问题了选择完图片进行本地预览时，发现图片翻转了但上传后再展示又是正常的。最近在处理移动端选择图片实时预览并上传时遇到一个问题：上传前图片预览正常，但上传到服务器上的图片展示到页面上时，有时会出现图片翻转的问题，一般是翻转 90 度。后经一翻研究找到了问题所在，特在此记录一下。问题描述接上面提到...

shinezejian 2019-08-19 17:15 评论0 收藏0