前端解决手机拍照旋转问题及图片压缩上传

最新推荐文章于 2020-03-09 09:59:51 发布

weixin_44817116

最新推荐文章于 2020-03-09 09:59:51 发布

阅读量1.1k

点赞数

文章标签：手机拍照图片压缩图片压缩图片上传

本文链接：https://blog.csdn.net/weixin_44817116/article/details/89326594

版权

本文介绍了如何在前端解决用户通过手机拍照后图片旋转的问题，并详细讲解了图片压缩和上传的实现过程，包括依赖jquery.js，html结构设计以及关键的javascript代码实现。

摘要由CSDN通过智能技术生成

1.依赖 jquery.js

2.html部分

<input class="addImage" name="loadFile" type="file" accept="image/*" capture="camera">

//capture="camera"   设置手机端打开上传文件时使用手机摄像头拍照上传，不写则默认拍照或相册

3.js部分

//input上传图片			
$('.addImage').on('change',function(){

    //开始处理图片，此时可以做一些“图片上传中。。。”的提示等

    var fileObj = this.files[0];  

    var fileName = fileObj.name;

    //压缩，先旋转在压缩，因为cavers从画图压缩，压缩后的图片就没有角度等信息了

    photoCompress(fileObj, {

              quality: 0.2  //清晰度

    }, function(base64Codes){

        //旋转并且压缩后传回base64编码，此时可以用ajax与后端传输图片，此方法不做演示

        //模拟表单提交

        var form = new FormData(); // FormData 对象

        var bl = convertBase64ToBlob(base64Codes);  //base64转化为blob对象

        form.append("loadFile", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象

        xhr = new XMLHttpRequest();  // XMLHttpRequest 对象

        xhr.open("post","<../medicalAppointment/tempImg.do", true);   

        //xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】

        //请求完成执行uploadComplete

        xhr.onload = function uploadComplete(evt){ 

                var data = evt.target.responseText;    //返回的数据data

                console.log(data)

        };

       xhr.onerror =  function uploadFailed(){}; //请求失败

       xhr.send(form); //开始上传，发送form数据

    })

})

//压缩后base64转化为blob

var convertBase64ToBlob = function(base64){

    var base64Arr = base64.split(',');