html5 调用原生上传图片,HTML5+Canvas调用手机拍照功能实现图片上传（上）-20210405090302.pdf-原创力文档...

HTML5+Canvas调调用用手手机机拍拍照照功功能能实实现现图图片片上上传传 ((上上))

因为最近一段时间，一直在弄微信项 ，其中涉及到了证件上传的功能，刚开始的时候一点头绪都没有，上网查了很多资料，Q

Q群里面也问了不少人，很多人说如果是app程序，可以申请系统权限，然后再去调用系统底层的东西，但是微信是在浏览器里

面操作的，我们自定义的页面也是通过微信内置浏览器打开的，而且微信浏览器在内部进行了很多特殊处理，屏蔽了很多东西，

所以要在页面调用拍照功能或者是打开手机系统的图库 录是不可能的，当然，这些都只是大伙儿理论上的猜测而已，而在我查

了两天的资料之后，发现这个问题原来是可以解决的，而且实现的过程居然也很简单。只是用到了HT ML5的file文件上传功能，

再配合canvas即可。下面附上源代码：

上传证件

bod {

margin: 20px 20%;

color:#777;

text-align: center;

}

#result{

margin-top: 20px;

}

上传证件...

---

---

$("input:file").localResizeIMG({

width: 500,

qualit : 0.8,

success: function (result) {

var img = new Image();

img.src = result.base64;

console.log(result.clearBase64);

//$("bod ").append(img);

$("#result").empt ();

$("#result").append(img); //呈现图像(拍照 Y果)

$.ajax({

url: "upLoadImageServlet",

t pe: "POST",

data:{formFile:result.clearBase64},

d