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

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

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

要实现该效果主要分三步

1. 一、如何获取图片及照片甚至打开手机摄像头
   刚开始做的时候，本人也是一片茫然，怎么获取图片甚至控制摄像机？在查阅相关文档后，实现这个很简单，只需一个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] //获取到的图片base64
  let 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，所以后端不识别，前端提交返回“请求参数格式错误”，所以通过

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

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