超清晰!HTML5 实现手机拍照上传功能原理讲解

这篇文章主要为大家详细介绍如何使用HTML5利用摄像头拍照实现上传功能,原理讲解非常清晰,具有较大的参考价值。

超清晰!HTML5 实现手机拍照上传功能原理讲解

上传页面代码:

<style >
    *{
        padding: 0;
        margin: 0;
    }
    .wrapper{
        width: 320px;
        height: 50px;
        margin: 20px auto;
        position: relative;
        border: 1px solid #f0f0f0;
    }
    input{
        width: 100px;
        height: 30px;
    }
    button{
        position: absolute;
        cursor: pointer;
        pointer-events: none;
        width: 100px;
        height: 30px;
        left: 0;
        top: 0;
    }
    a{
        pointer-events: none;
    }
    .img{
        border: 1px solid #ccc;
        padding: 10px;
    }
</style >
 
<div class = "wrapper">
     <input type = "file" accept= "image/*" capture= "camera" id= "img" />
     <button >上传照片 </button >
</div >

上传图片用的HTML5的file文件上传功能<input type=”file” accept=”image/*”>

因为原生file样式不满足要求,在input上面放置我们想要的页面效果。然后当点击上面的元素,就可以触发我们的input进行图片上传。此时的问题是:当点击input上面的元素,需要事件穿透,即相当于点击input。则借助于css3新属性pointer-events。

//使用cursor进行事件穿透,来阻止元素成为鼠标事件的目标
button{
     cursor:pointer;
     pointer-events:none;
}

图片压缩处理

  1. 因为是手机拍照上传,现在的手机拍的照片都很大,如果原图上传,太消耗用户流量,上传前要进行图片压缩。
  2.   通过change事件,监听图片上传,通过readerAsDataURL获取上传的图片。
document.getElementById( 'img').addEventListener( 'change', function () {
     var reader = new FileReader();
     reader.onload = function (e) {
          //调用图片压缩方法:compress();
     };
     reader.readAsDataURL(this.files[0]);
     console.log(this.files[0]);
     var fileSize = Math.round( this.files[0].size/1024/1024) ; //以M为单位
     //this.files[0] 该信息包含:图片的大小,以byte计算 获取size的方法如下:this.files[0].size;
}, false);

 对上传的图片进行压缩,需要借助于canvas API,调用其中的canvas.toDataURL(type, encoderOptions); 将图片按照一定的压缩比进行压缩,得到base64编码。重点来了:压缩策略:先设置图片的最大宽度 or 最大高度,一般设置其中一个就可以了,因为所有的手机宽高比差别不是很大。然后设置图片的最大size,allowMaxSize,根据图片的实际大小和最大允许大小,设置相应的压缩比率。

//最终实现思路:
1、设置压缩后的最大宽度 or 高度;
2、设置压缩比例,根据图片的不同size大小,设置不同的压缩比。
 
function compress(res,fileSize) { //res代表上传的图片,fileSize大小图片的大小
    var img = new Image(),
        maxW = 640; //设置最大宽度
 
    img.onload = function () {
        var cvs = document.createElement( 'canvas'),
            ctx = cvs.getContext( '2d');
 
        if(img.width > maxW) {
            img.height *= maxW / img.width;
            img.width = maxW;
        }
 
        cvs.width = img.width;
        cvs.height = img.height;
 
        ctx.clearRect(0, 0, cvs.width, cvs.height);
        ctx.drawImage(img, 0, 0, img.width, img.height);
 
        var compressRate = getCompressRate(1,fileSize);
 
        var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);
 
        document.body.appendChild(cvs);
        console.log(dataUrl);
    }
 
    img.src = res;
}
 
function getCompressRate(allowMaxSize,fileSize){ //计算压缩比率,size单位为MB
      var compressRate = 1;
 
      if(fileSize/allowMaxSize > 4){
           compressRate = 0.5;
      } else if(fileSize/allowMaxSize >3){
           compressRate = 0.6;
      } else if(fileSize/allowMaxSize >2){
           compressRate = 0.7;
      } else if(fileSize > allowMaxSize){
           compressRate = 0.8;
      } else{
           compressRate = 0.9;
      }
 
      return compressRate;
}

图片上传给服务器

图片已经压缩完成了,但是压缩后的图片不是File,而是一个base64编码,需要以String的形式将base64编码上传给服务器,服务器转存base64为img图片。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10947.html

(1)
江山如画的头像江山如画管理团队
上一篇 2022年8月10日 下午9:14
下一篇 2022年8月11日 上午9:48

99%的人还看了以下文章

  • python turtle绘画0基础练习

    一、题目:导入turtle包(import turtle),绘制边长为100的正方形。 要求: 1、新建一个“turtle2.py”文件 2、编写程序。 3、调试程序。 4、排除错误。 二、导入turtle包(import turtle),绘制半径为40的圆(circle)。 三、题目:导入turtle包(import turtle),绘制边长为60的等边三…

    2023年6月15日
    4.6K0
  • Python安装-小白图文教程(精)

    python优点 python非常简单,易学。 python虽然是用c语言写的,但是它摈弃了c中非常复杂的指针,简化了python的语法。 Python程序无需修改就可以在任何平台上面运行。 Python既支持面向过程的函数编程也支持面向对象的抽象编程。 你可以把你的部分程序用C或C++编写,然后在你的Python程序中使用它们。你可以把Python嵌入你的…

    2019年3月15日 编程开发
    7.1K1
  • 卷积神经网络 数据维度计算公式:输入输出关系、输出维度

    假设你有 5 个大小为 7×7、边界值为 0 的卷积核,同时卷积神经网络第一层的深度为 1。 此时如果你向这一层传入一个维度为 224x224x3 的数据,那么神经网络下一层所接收到的数据维度是( )。 A.218*218*5 B.217*217*8 C.217*217*3 D.220*220*5 在进行深度学习训练时,优化器会对模型的参数进行优化…

    2022年9月22日 编程开发
    10.6K3
  • 程序设计基础(C语言)—教学设计、教案

    教学设计——程序设计基础 教学基本信息 课程名称 程序设计基础 性质 专业基础课 学分 3 学时 48 题目 数据类型 专业年级 软件工程专业一年级 教材 书名:C程序设计(第五版) 出版社:清华大学出版社    出版日期: 2017年8月 教学背景分析 一、学习内容分析: 本节课要介绍的知识点——数据类型比较简单,但都是概念。对于这些陌生的、枯燥的纯概念性…

    2020年4月10日
    10.0K0
  • Java GUI编程高级实例一:给应用程序添加菜单

    一、给GUI应用程序添加菜单 菜单的作用:给应用程序设置操作菜单。 菜单组成 JMenuItem—菜单项,直接指向一个具体的操作 JMenu—菜单,其中可加入菜单项(JMenuItem)和菜单(Jmenu) JMenuBar—-菜单栏,在其中可以加入菜单(JMenu) 菜单的创建 JMenu、JMenuBar和JMenuI…

    2020年1月22日
    6.1K0
  • 简!修改Jupyter 默认打开目录的方法

    1、启动cmd,执行以下命令,查看 jupyter 配置文件路径 C:Users41588>jupyter notebook –generate-configWriting default config to: C:Users41588.jupyterjupyter_notebook_config.py 2、找到配置文件 jupyter_n…

    2023年7月19日 编程开发
    4.5K0

发表回复

登录后才能评论