HTML5 嵌入与APP时，调用IOS或者安卓的相机

     问题描述

 1、最近做项目遇到了一个让我无比崩溃的BUG，

            就是HTML5里的 <input type="file" name="" id="photo2" accept="image/*" multiple>  来 调取 手机的相机 时，

            在微信上或者在浏览器上访问这个 HTML5页面都没有问题。当在 APP里用webview来加载这个HTML5页面的时候就出了问题。

            问题就是：当一点那个拍照按钮  页面就会跳回 首页~~ 或者闪退。

   

   解决方案提出

2. 我就想能不能通过调用安卓或者IOS的相机，然后拍到的照片再传会给我的页面。

     所以就上网百度了很多资料，最后的实现方案就是 让  APP端监听我点击  的点击事件，监听到后就调用相机。



HTML5的JS代码如下：

//给安卓监听的
$("#photo1").click(function(){
JSInterface.creditCard();
});
$("#photo2").click(function(){
JSInterface.idCard();
});
$("#photo3").click(function(){
JSInterface.idCreditCard();
});

    // 回调安卓的方法
    function javacalljswith(arg) {

//和安卓方约定好的传回来的参数
    	   var type = arg.substr(arg.length-1,1);
    	   var path = arg.substring(0,arg.length-2); 
           $("#photo"+type+"img").attr("src",path);

//上传
    	   uploadImage(path,type);
    	 }

 //ios
$("#photo1").click(function(){
call();
});
$("#photo2").click(function(){
call2();
});
$("#photo3").click(function(){
call3();
});

 var Callback = function(str) // 与IOS约定好的方法
  {    
  	$("#photo1img").attr("src",str);

        //JS压缩图片
  	cutImageBase64(str,1,wdith,quality);
  };

  这样之后又会遇到一个问题就是，APP端如果传回来的是一个照片再手机上的路径我不知道该如何访问这个路径。
于是又有了一个新的解决方案就是，让APP端将图片转为base64的格式传过来。  

这样  在HTML5里只要   写    <img   src="base64" ></img>  这样就能显示出图片了。

接下来就是要 进行上传，但是Base64有个弊端就是 会比原图片大所以上传的时候要对图片进行压缩。

JS 的压缩方法 如下： /*
* @param m_this当前对象
* @param id展示图片id
* @param wid压缩后宽度
* @param quality压缩质量
* */
function cutImageBase64(str,id,wid,quality) {
var base64;
var img = new Image();
img.src = str;
img.onload = function() {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = wid || w;
h = w / scale;

//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({
width: w,
height: h
});
ctx.drawImage(that, 0, 0, w, h);
// 生成base64
base64 = canvas.toDataURL('image/jpg', quality || 0.8);
uploadImage(base64,id);
};
}
  这就是 这次大概的解决流程。 希望 这个思路 在大家需要的时候能够帮到大家。  如有疑问 可以留言~~。