1、拍照拍照是采用HTML5的Canvas功能,实时捕获Video标签的内容,因为Video元素可以作为Canvas图像的输入,所以这一点很好实现。主要代码如下:varcanvas=document.createElement(‘canvas’);//动态创建画布对象varctx=canvas.getContext(’2d’);varcw=vw,ch=vh;ctx.fillStyle=”#ffffff”;ctx.fillRect(0,0,cw,ch);ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh);//将video对象内指定的区域捕捉绘制到画布上指定的区域,可进行不等大不等位的绘制。document.body.append(canvas);
2、图片获取从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像,类似于“data:image/png;base64,xxxxx”的格式。varimgData=canvas.toDataURL(“image/png”);这样,imgData变量就存储了一长串的字符数据内容,表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分,所以要让实际服务器接收的图像数据应该是这部分,方法是在前端截取22位以后的字符串作为图像数据,例如:vardata=imgData.substr(22);如果要在上传前获取图片的大小,可以使用:varlength=atob(data).length;//atob可解码用base-64解码的字串
3、图片上传在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用:$.post(‘upload.php’,{‘data’:data});在后台用PHP脚本接收数据并存储为图片。functionconvert_data($data){$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);save_to_file($image);}functionsave_to_file($image){$fp=fopen($filename,’w’);fwrite($fp,$image);fclose($fp);
如果觉得《HTML5+Canvas调用手机拍照功能实现图片上传(上)? html编辑框默认值》对你有帮助,请点赞、收藏,并留下你的观点哦!