H5页面拍照上传图片步骤

H5页面拍照上传图片步骤：
1，给相应的input标签添加监听
document.getElementById('imgCream').addEventListener('change', function(){}，false)
2，创建readerFile对象，并读取当前文件图片
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
3，创建一个画布
var canvas=document.createElement('canvas');//创建一个画布 
var ctx = canvas.getContext('2d');//制定画布的二维绘图类型
4，创建一个image对象
var img = new Image();
5，将reader中读取到的文件赋值给img对象
 img.src=dataURL;
6，将图片画到画布上（缩小图片比例）
1.定义一个固定值影响图片大小
var square = 400;
2.定义一个缩小比例宽长
var imageWidth;
 var imageHeight;
3.计算图片缩小后的长宽
if (this.width > this.height) {
         imageWidth = Math.round(square * this.width / this.height);
         imageHeight = square;
         offsetX = -Math.round((imageWidth - square) / 2);//画布位置
     } else {
         imageHeight = Math.round(square * this.height / this.width);
         imageWidth = square;
         offsetY = -Math.round((imageHeight - square) / 2);
     };
7，压缩图片并设置压缩格式
ctx.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);

canvasImg= canvas.toDataURL('image/png', 1.0);

源码：

$(function(){
/*给调用相机添加监听，获取到上传的图片 */
document.getElementById('imgCream').addEventListener('change', function(){
var base64;
//file文件的读取
var reader = new FileReader();
reader.onload = function (e){
var dataURL = e.target.result;// // e.target.result就是图片的base64地址信息
console.log("压缩前"+dataURL.length);
var canvas=document.createElement('canvas');//创建一个画布 
var ctx = canvas.getContext('2d');//制定画布的二维绘图类型
var img = new Image();
// base64地址图片加载
img.onload = function(){
var square = 400;//创建一个固定值，这个值影响压缩大小
canvas.width = square;//获取画布的
canvas.height = square;
//var content=convas.getContext('2d');//制定画布的二维绘图类型
ctx.clearRect(0, 0, square, square);//清空画布>>大小为固定的值的宽度
var imageWidth;
           var imageHeight;
           var offsetX = 0;
           var offsetY = 0;
           //判断是横拍或者竖拍
           if (this.width > this.height) {
               imageWidth = Math.round(square * this.width / this.height);
               imageHeight = square;
               offsetX = -Math.round((imageWidth - square) / 2);//画布位置
              console.log("横拍:"+imageWidth+"/"+imageHeight+"画布位置"+offsetX);
           } else {
               imageHeight = Math.round(square * this.height / this.width);
               imageWidth = square;
               offsetY = -Math.round((imageHeight - square) / 2);
               console.log("原图:"+this.width +"/"+this.height);
               console.log("竖拍:"+imageWidth+"/"+imageHeight+"画布位置"+offsetY);
           };
           // 图片压缩
           ctx.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
           //从画布中获取文件/图片（base64的格式）
            canvasImg= canvas.toDataURL('image/png', 1.0);
            var  base64=canvasImg.substring(22);
            console.log("图片压缩类型:"+typeof(base64));
            console.log("压缩后:"+base64.length);
            //调用upimage方法
            upImg(base64);          
};
     //给对象添加src
     img.src=dataURL;
   };
   //读取文件>>>回调reader.onload函数
   if(this.files[0]!=null){
$("#imgCream").attr({"disabled":true});//禁用拍照
loader = layer.load(2);//解析图片时页面logo设置加载样式
    reader.readAsDataURL(this.files[0]);//使用reader读取当前拍照的图片
   }else{
    return false;//取消拍照
   };
},false);
});

function upImg(image){
var params={"txcode":"MPIF0013","user_phone":user_phone,"frt_cd_pho":image};
var jsonParam=JSON.stringify(params);
console.log("解析图片"+jsonParam);
$.ajax({
url:"******************",
dataType:"json",
data:jsonParam,
type:"post",
async:false,
beforeSend:function(){
},
success:function(message){
layer.close(loader); //关闭加载
console.log(message.return_code);
if(message.return_code=="000000"){
$("#imgCream").attr({"disabled":false});
//显示解析的卡号
card_no=message.card_no;
$("#card_no").val(card_no);
//用户提示
layer.msg("请仔细核对信息是否与卡号一致", {time:0,btn: ['确认']});
}else{
layer.msg(message.return_msg);
};
}
});