拍照上传

HTML5 实现手机拍照上传

由 只谈情不闲聊 提交于 2019-12-05 07:41:13
背景：移动端H5项目，需要实现调用手机拍照，并将图片压缩上传功能。 页面样式： 上传图片有原生的方法<input type="file" accept="image/*">，如果只想要拍照上传，不希望用户选择图片上传，可以通过添加capture属性，该属性值有camcorder/microphone/camera...，此处选择camera。PS：该属性存在浏览器兼容性问题，不是所有的浏览器都支持。 <input type="file" accept="image/*" capture="camera" > 因为原生file样式不满足要求，需要进行相应的处理，此时使用定位，在input上面放置我们想要的页面效果。然后当点击上面的元素，就可以触发我们的input进行图片上传。此时的问题是：当点击input上面的元素，需要事件穿透，即相当于点击input。则借助于css3新属性pointer-events。 //使用cursor进行事件穿透，来阻止元素成为鼠标事件的目标 button{ cursor:pointer; pointer-events:none; } ----此时图片上传的样式已经处理好了---- 代码片段： <style > *{ padding: 0; margin: 0; } .wrapper{ width: 320px; height: 50px; margin:

Android应用开发之使用PhoneGap实现拍照上传功能

由 南楼画角 提交于 2019-11-28 18:58:18
看这里： Android应用开发之使用PhoneGap实现拍照上传功能 在之前的 使用Intellij Idea 搭建PhoneGap Android开发环境 以及 Android应用开发之使用PhoneGap实现位置上报功能 两篇文章中，我们学习了phonegap Android环境的搭建以及phonegap获取位置信息自动上报等，本篇在之前的基础上，我们继续进行PhoneGap Android应用的开发，通过PhoneGap调用摄像头实现拍照自动上传的功能。 整体的学习思路大概是这样：index.html中提供三个按钮，分别是【 拍照 】、【 本地图片 】、【 拍照上传 】，主要是以下三个步骤： 点击【拍照】按钮，调用摄像头拍照，成功后在按钮右侧显示相应的图片； 点击【本地图片】按钮，调用本地图片库，选择图片后在按钮右侧显示选择的图片； 点击【拍照上传】按钮，调用摄像头拍照，成功后首先上传图片到服务器端后，上传成功后提醒，并在按钮右侧显示上传的图片。 初始的html文件，大致是这样，简单的进行了布局和javascript代码的编写，如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/
订阅 拍照上传