H5上传照片、图片及预览裁剪

忙里得闲将之前工作中遇到的问题进行总结

要实现该效果主要分三步

一、如何获取图片及照片甚至打开手机摄像头
刚开始做的时候，本人也是一片茫然，怎么获取图片甚至控制摄像机？在查阅相关文档后，实现这个很简单，只需一个input，下面简单的介绍下

深入了解input type=file 请点击：https://www.haorooms.com/post/input_file_leixing || http://www.runoob.com/tags/tag-input.html

到这里，你就实现获取到本地（本机）的照片或者图片了，而且控制摄像头只需要添加capture=“camera” 如：

图片获取到接下来就是如何展示在自己需要的区域内？

二、预览，展示
仔细观擦，我们获取到的图片或者文件已经转换为base64码（如果有不懂得请自行百度），
思路：我们可以创建一个标签，并将获取到的base64码填充到img src中，如图所示：

具体代码如下

  var Btn = document.getElementById('#fBtn');var Img = document.getElementById('fimg');var Bfile = Btn.file[0] //获取到的图片base64let reader = new FileReader() //创建了一个FileReader对象，命名为reader。reader.readAsDataURL(file) //用reader.readAsDataURL(file)，调用FileReader类中的readAsDataURL方法，并把之前获取的file对象传进去reads.function (e) {Img.src=this.result;};

现在效果已经实现，可是考虑到现在图片的大小都是偏大的，所以考虑到在网速较慢的情况上传一张高清照是很费劲且用户体验也十分不好，所以在我们上传之前要对获取到图片进行压缩，而此处是通过cavas对图片进行一个保质等比绘制，代码如图：

三、上传
通过ajax将图片上传base64上传
ps：此处有个小插曲，当时需要我们上传的是body体，但是我们上传默认是json，所以后端不识别，前端提交返回“请求参数格式错误”，所以通过

到这图片获取，预览及上传就实现了

希望对您有所帮助，欢迎纠正！

H5上传照片、图片及预览裁剪相关推荐

jQuery点击头像上传头像图片并预览图片
HTML代码 <div class="img_show img_show1"> <img src="img2/img06.jpg&quo ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
[html] 图片上传时实现本地预览功能的原理是什么？
[html] 图片上传时实现本地预览功能的原理是什么? 通过HTML5 File API读取用户上传的图片,生成一个image对象显示到页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片
大家好,我叫小秃僧这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能学习目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
利用钉钉云盘实现业务系统需要的附件上传、下载和预览
本文主要记录自己在工作学习中遇到的坑和解决思路,仅供大家参考目录前言一.钉盘是什么? 二.为什么要使用钉盘? 三.JSAPI鉴权 1.鉴权的时机 2.鉴权的时效 3.鉴权的代码 3.1.获取ac ...
SpringBoot+MongoDB GridFS文件上传、下载、预览实战
SpringBoot + MongoDB GridFS 随着web 3.0的兴起,数据的形式不局限于文字,还有语音.视频.图片等.高效存储与检索二进制数据也成为web 3.0必须要考虑的问题.然而这种 ...
小程序自定义上传富文本并预览
上传时的效果预览时的效果代码如下(可直接全部复制查看,注意:下面上传的接口需要改成你们自己的服务器上传接口) <view class="col"><text& ...

H5上传照片、图片及预览裁剪

H5上传照片、图片及预览裁剪

要实现该效果主要分三步

H5上传照片、图片及预览裁剪相关推荐

最新文章

热门文章