使用HTML5技术控制电脑或手机上的摄像头【web前端开发吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：49,908贴子：
使用HTML5技术控制电脑或手机上的摄像头收藏
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。　　下面的代码里写了一部分注释，请阅读：1.
理想情况下我们应该先判断你的设备上是否 3.
有摄像头或相机，但简单起见，我们在这里直接 4.
写出了HTML标记，而不是用JavaScript先判断 5.
然后动态生成这些标记 6.
&video id=&video& width=&640& height=&480& autoplay&&/video& 8.
&button id=&snap&&Snap Photo&/button& 9.
&canvas id=&canvas& width=&640& height=&480&&&/canvas& 在写出上面这些标记前应该判断用户的客户端是否有摄像头支持，但这里为了不那么麻烦，这里直接写出了这些HTML标记，需要注意的是我们这里使用的长宽是640×480。　　JavaScript代码　　因为是手工写出的HTML，所以下面的js代码会比你想象的要简单了很多。1.
// Put event listeners into place 2.
window.addEventListener(&DOMContentLoaded&, function() { 4.
// Grab elements, create settings, etc. 6.
var canvas = document.getElementById(&canvas&), 8.
context = canvas.getContext(&2d&), 10.
11. video = document.getElementById(&video&), 12.
13. videoObj = { &video&: true }, 14.
15. errBack = function(error) { 16.
17. console.log(&Video capture error: &, error.code); 18.
19. }; 20.
21. // Put video listeners into place 22.
23. if(navigator.getUserMedia) { // Standard 24.
25. navigator.getUserMedia(videoObj, function(stream) { 26.
27. video.src = 28.
29. video.play(); 30.
31. }, errBack); 32.
33. } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 34.
35. navigator.webkitGetUserMedia(videoObj, function(stream){ 36.
37. video.src = window.webkitURL.createObjectURL(stream); 38.
39. video.play(); 40.
41. }, errBack); 42.
45. else if(navigator.mozGetUserMedia) { // Firefox-prefixed 46.
47. navigator.mozGetUserMedia(videoObj, function(stream){ 48.
49. video.src = window.URL.createObjectURL(stream); 50.
51. video.play(); 52.
53. }, errBack); 54.
57. }, false); 　　一旦判断出用户浏览器支持getUserMedia，下面就非常简单了，只需要将那个video元素的src设置为用户的摄像头视频直播连接。这就是用浏览器访问摄像头需要做的所有的事情!　　拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器，将视频画面画到画布上。1.
// 触发拍照动作 2.
document.getElementById(&snap&) 4.
.addEventListener(&click&, function() { 6.
context.drawImage(video, 0, 0, 640, 480); 8.
}); 　　当然，你还可以在图片上加一些滤镜效果….我还是把这些技术放到以后的文章里再说吧。但至少你可以将这个画布图像转换成一张图片。　　以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头，这不免有些复杂。现在只需要HTML5的画布技术和javaScript，我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头，而且是因为HTML5的画布技术及其强大，我们可以给图片上加入各种迷人的滤镜效果。现在，在浏览器里用自己的摄像头给自己拍张照片吧!
千锋web前端开发,名企内部推荐就业,入学签订就业协议,2周免费试学!千锋web前端开发,20周快速成为高级开发工程师,就业“薪”踏板!
【html&css】免费学习资料，搜【WEB前端互动交流群】
做这种功能
一般不用h5
如果浏览器不支持h5增么办
如果app是原生的增么办
客户要求自动对焦增么办
等等一系列问题
一般都是用插件调用本地的相机
这种写法只是调用了摄像头
楼主可以看一下
登录百度帐号html5 上传本地图片处理各种问题 - 简书
html5 上传本地图片处理各种问题
这是最近给公司写一个项目，项目要求大概是这样子：
1.上传手机本地图片，然后裁剪（后加的需求）
2.能够旋转图片，用于裁剪（后面加的需求）
3.填写各种文字，选择颜色，之后把文字和2个相关的图片，水印到裁剪的图片上，上传服务器生成一个图片地址，返回，分享出去。
功能就是大概上面这些，其他的也就是各种小功能，不提了，技术选型说下，整体上使用 Vue（包括 router，resource，webpack等等）
那么这几个需求怎么做呢：
1、 本地上传，使用 html5 的 File Api 拿到图片的base64编码，赋值给img的src（坑1，2），然后弹出一个图层，进行裁剪，最开始裁剪是在img的上面套一个div来进行坐标计算，计算完了使用canvas来截取图片，然后取值（坑3）。
2、这个功能就是使用canvas的旋转图片解决，需要注意的是，旋转的时候要保持横纵比，而且要注意宽高的大小（坑4）。
3、使用canvas来叠加水印和图片即可，主要是注意坐标。
那么说说坑：
1、拿到src的base64编码，看似没有问题，实际上有个巨大的问题，很多图片在手机上显示为竖屏，但是拿到的base64编码，直接赋值给img的src后，发现是横屏的。最开始发现这种情况，以为是个别现象，最后不断尝试之后，发现是个非常普遍的情况，特别是IPhone手机，而且还分你选择的图片文件夹，相册和照片流同一张图片，一个横屏，一个竖屏。导致我完全不能理解这是为什么？？？基本一个下午耗在这个问题上了。
直到晚上回去，问我一个朋友IOS开发的大神，@,他告诉我，因为现在IPhone的摄像头就是横着的，手机里显示竖屏的原因是ios自己做了处理，他们可以根据图片的一个拍摄角度数值来判断横竖问题，但是这个数值在我们web端确拿不到，很是尴尬。那么怎么解决这个问题呢？？ ------- 我使用的方案:旋转图片，可以让用户自己去主动旋转图片，选取角度。 还有另外一种解决方案，在坑2也用到，后面讲。
2、除了这个横屏之外，android手机有的上传，选择了图片之后，没有任何反应，我开始一度认为原因是不支持html5的File Api，所以没有显示出上传的图片，后面就各种debugger，发现原因是没有触发Input标签的change事件，而且不管怎么样都没有办法触发，为了解决这个问题，查阅了各种官方文档和stackoverflow之后，发现可以给 type="file"的input添加两个属性来表示手机上传图片。
&input type="file" name="image" class="file-choose" id="file" accept="image/*" v-on:change="chooseFileChange($event)" capture/&
这样添加了 accept 和 capture之后，有问题的android手机，在选择图片的时候，有好几个文件夹，可以选择了，其中有的可以上传，有的不行，经常仔细的测试发现，sd卡上的图片是拿不到的，也就不会触发change事件，因为没有root权限去拿文件数据。又是一个无解问题，因为你的web在浏览器里面，权限就是低啊，（不得不吐槽下web的权限问题，妈蛋）怎么解决问题呢？？？ 绕过去，也就是说如果你的页面是嵌套在你们公司自己App里面的，就让App帮你，那么我们项目是微信传播的，一定在微信浏览器里面，所以可以调用微信的JSSDK的选择图片接口，他是可以越过这些权限，而且还有一个好处，就是解决坑1的问题，他会处理横屏问题，就是把看着竖屏，实际横屏的上传时都处理为竖屏，但是代价也不小，你要选择图片，拿到一个key，然后继续调用sdk传到微信的服务器，拿到一个serverid，这个id传给自己的服务端，让他们通过这个id，去微信下载图片到自己的服务器，返回给你一个Url。过程很曲折，而且下载次数有限制（可以跟微信申请加载限制）；
3、我们继续说坑，以上问题，解决了之后，就是裁剪了，开始我使用的方案是这样子的，获取到base64之后，赋值给一个img，然后在这个img上进行框选移动，计算坐标然后裁剪，pc端完全没有任何问题，效率很高，但是放到微信上面测试，发现3个问题（妈蛋，手机端就是坑，一个功能，3个不同的问题），第一个问题，大家都知道现在手机像素高，图片不小，上传过来之后，base64也不小，放到img的src中其实就是内存中了，导致整个微信特别容易崩溃（就是崩溃，他就崩溃了，微信就崩溃了---三遍），第二个问题,使用vue的on来绑定touch事件，响应很慢，移动一点都不平滑，而且也会崩溃，没错，又崩溃了。第三个问题，旋转要使用canvas转化，先去图片数据，转完后，在给图片src赋值，很麻烦。
解决方案： 统一使用canvas，不要再用img，知道裁剪完成了，把img的base64拿到就行，而且导出的时候，使用jpeg不要是png，降低一些画质，我觉得完全没有影响，也就是图片的裁剪，旋转都是canvas，事件建议直接原生绑定。
4、旋转的坑，这个的问题是我们必须保存住原始图片的数据，进行canvas先旋转然后drawImage，要不没有旋转出来，canvas自己的imageData，貌似没有办法旋转，我试了矩阵的方式好像都不行（也可能是自己数学不好！！！如果有人知道，就demo）。
以上就是这次项目，遇到的各种大坑，其他都是小的地方，不过总体来说，完成了任务，并且使用了新的技术Vue.js。Vue的component还是非常好用的，注意父子关系，props的继承就没问题了。
欢迎大家交流相关技术， 如果对Vue感兴趣，可以加QQ群： ，。
求打赏，求关注微博。O(∩_∩)O哈哈~
最后附上活动网址，微信客户端打开才能使用：
欢迎各位参与玩耍。
阿里巴巴-- 前端
最近迷上了潜水和公路车
weibo：http://weibo.com/gxiaogui?wvr=4&lf=reg
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
来源 https://zhuanlan.zhihu.com/p/ 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇 的番外篇，因为严格来说不是在讲Python而是讲在Python下使用OpenCV。本篇将介绍和深度学习数据处理阶...
计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指**不借助任何后端服务**纯前端实现的图像处理。本文会介绍canvas位图处理，SVG矢量图和...
CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知道他有没有去申请专利:)&!DOCTYPE htm...
encourage people to do the same things with you Rent an apartment Buying a house is better than renting an apartment A newly couple can s...
文／白茶与情歌 故事应该从乌龟小姐的那次暗恋说起。乌龟小姐的名字叫做六月，她第一次喜欢上一个人，是在自己大三那一年，那个人是她的好朋友。这场暗恋整整耗尽了3年的时光，久到六月已经忘记喜欢他的原因，可是仍旧不愿意放弃喜欢他。 男孩的名字叫做谢昊，他们第一次见面是在一场很尴尬的...
课程主要讨论互联网上数据，尤其指社交媒体上的大数据。例如微博。 话题一：互联网世界的基本结构 人既处于现实社会的社会网络，也处于网络上。互联网上，人可以游移，可以在多个网站来回转移。 以第一财经为例说明传统媒体结构，社会化媒体架构的样子。社会化媒体重构组织的信息传播管理系统...
张文亮曾经有一篇《牵一只蜗牛去散步》的诗文非常流行，内容是这样的： 上帝给我一个任务 叫我牵一只蜗牛去散步。 我不能走太快， 蜗牛已经尽力爬，为何每次总是那么一点点？ 我催它，我唬它，我责备它， 蜗牛用抱歉的眼光看着我， 彷佛说：「人家已经尽力了嘛！」 我拉它，我扯它，甚至...
我们经常会说一句话：不忘初心。就是告诉我们自己最初的决定，最初的目标，最初你想活成的模样不要忘记，因为那是你往前前进的力量，要努力活成自己喜欢的样子，哪怕前面是一片荆棘也要跪着走完它。但是不是谁一开始就知道自己想要什么，有什么梦想，就像黄执中在《奇葩说》里面辩论说的“有些人...15:56 提问
H5页面调用手机摄像头
能否实现评估手机和安卓手机浏览器打开H5页面调用摄像头默认打开前置摄像头，并且只能打开相机拍摄，不能从相册里选取，请各位大神出点主意
按赞数排序
好像是要用
navigator.mediaDevices.getUserMedia()方法
这个我在做类似扫一扫的时候遇到过，遇到的问题：
1、浏览器调用摄像头不是所有浏览器都做了这个功能，所以兼容性是很大的问题。
2、打开摄像头这是要涉及到权限的，所以需要用户通过，不是你说调用哪个就那个。
所以这两个问题目前只有第一个问题在部分浏览器能够实现，第二个一直要通过用户授权。不然就没有安全性了。
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐AngularJS中使用HTML5手机摄像头拍照
转载 &发布时间：日 09:32:18 & 投稿：mrr
这篇文章主要介绍了AngularJS中使用HTML5手机摄像头拍照的相关资料,需要的朋友可以参考下
1. 项目背景
公司开发一个网站，在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能。因为我们网站是基于Html5进行开发，所以就直接采用H5来实现拍照。起初觉得这个功能很简单，但是做的时候才发现并不是那么简单的。
这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图：
2. 如何调用摄像头
$scope.photoErr =
$scope.photoBtnDiable =
var mediaStream = null,track =
navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getMedia) {
navigator.getMedia(
video: true
// successCallback
function (stream) {
var s = window.URL.createObjectURL(stream);
var video = document.getElementById('video');
video.src = window.URL.createObjectURL(stream);
mediaStream =
track = stream.getTracks()[0];
$scope.photoBtnDiable = $scope.$apply();
// errorCallback
function (err) {
$scope.errorPhoto();
console.log("The following error occured:" + err);
$scope.errorPhoto();
代码解析：
navigator为浏览器对象，包含浏览器的信息，这里就是用这个对象打开摄像头。$scope为AndularJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数，目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：
video: true，
audio: true
调用成功即打开摄像头后返回视频流数据，我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据，track在Chrome浏览器中用来跟踪摄像头状态，这两个变量都能用来关闭摄像头。
$scope.snap = function () {
var canvas = document.createElement('canvas');
canvas.width = "400";
canvas.height = "304";
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 400, 304);
$scope.closeCamera();
$uibModalInstance.close(canvas.toDataURL("image/png"));
拍照时需要使用到canvas标签，创建一个canvas标签，设置我们需要拍照的尺寸大小，通过drawImage函数将video当前的图像保存到canvas标签，最后将图像数据转换为base64数据返回并关闭摄像头，这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开弹出层的一个对象，用来控制弹出层的显示。
4. 如何关闭摄像头
$scope.closeCamera = function () {
if (mediaStream != null) {
if (mediaStream.stop) {
mediaStream.stop();
$scope.videosrc = "";
if (track != null) {
if (track.stop) {
track.stop();
正如前面所说，关闭摄像头的方式是通过mediaStream和track变量，只不过，track只能关闭Chrome浏览器中的摄像头，这也是Chrome 45版本以上关闭摄像头的方式。
5. 集成到AndularJs
事实上，前面所说的都是在AndularJs中实现的，当然，这里只是实现了拍照并返回拍照数据，我们想要在其他地方也使用，就需要将这部分独立出来，这里我们用到了AngularJs中的service机制，将这部分单独做成一个service并在项目中注入，然后就可以在其他地方调用了。
service注册:
app().registerService("h5TakePhotoService", function ($q, $uibModal) {
this.photo = function () {
var deferred = $q.defer();
require([config.server + "/com/controllers/photo.js"], function () {
$uibModal.open({
templateUrl: config.server + "/com/views/modal_take_photo.html",
controller: "photoModalController",
windowClass: "modal-photo"
}).result.then(function (e) {
deferred.resolve(e);
return deferred.
调用方式：
$scope.takePhoto = function () {
h5TakePhotoService.photo().then(function (res) {
if (res != null && res != "") {
$scope.myImage =
h5TakePhotoService为控制器中注入的拍照service对象，最后处理返回的图像数据，设置数据显示到界面上。
6. 兼容问题
主要存在Chrome浏览器中，本地测试时，Chrome浏览器中能够正常使用，但是部署到服务器后就不能正常使用，报错消息为 [object NavigatorUserMediaError]，这是因为Chrome浏览器在使用摄像头时只支持安全源访问，所以只能通过https访问才能正常使用。
最后需要说一下，测试时只能通过http://url访问才能使用，不能通过file://url方式访问，即我们需要将代码部署才能访问，可以在Visual Studio、 java web、php中完成。
以上所述是小编给大家介绍的AngularJS中使用HTML5手机摄像头拍照的相关知识，希望对大家有所帮助！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
互联网 & 07-13 16:31:20 & 作者：佚名 &
这篇文章主要为大家详细介绍了HTML5 Plus的Camera、GalleryIO、Storage和Uploader，实现手机APP拍照或相册选择图片上传功能的相关资料，感兴趣的小伙伴们可以参考一下
利用HTML Plus的Camera、GalleryIO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。Storage模块管理应用本地数据存储区，用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同，前者可在应用内跨域操作，数据存储期是持久化的，并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。&
&!doctype&html&&
&class=&feedback&&&
&&&charset=&utf-8&&&&
&&&name=&viewport&&content=&width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&&&&
&&&name=&misapplication-tap-highlight&&content=&no&&&&
&&&name=&HandheldFriendly&&content=&true&&&&
&&&name=&MobileOptimized&&content=&320&&&&
&&HTML5&Plus&拍照或者相册选择图片上传&&
&&&rel=&stylesheet&&href=&../../css/mui.min.css&&&
&&&rel=&stylesheet&&type=&text/css&&href=&../../css/app.css&&&&
&&&rel=&stylesheet&&type=&text/css&&href=&../../css/iconfont.css&&&&
&&&rel=&stylesheet&&type=&text/css&&href=&../../css/feedback-page.css&&&&
&&&rel=&stylesheet&&href=&../../css/font-awesome.min.css&&&
&&&src=&../../js/jquery.js&&&
&&&type=&text/javascript&&src=&../../js/common.js&&&
&&&type=&text/javascript&&src=&../../js/utitls.js&&&
&&&type=&text/javascript&&src=&http://api.map.baidu.com/api?ak=59PBaEOro16CiH2W4CG81zEN&v=2.0&&&
&&&type=&text/css&&&
&&&.del&{ &&
&&&&position:& &&
&&&&top:1 &&
&&&&right:&1& &&
&&&&display:&&&&&&& &&
&&&&&&&line-height:&1; &&
&&&&&&&cursor:& &&
&&&&&&&color:# &&
&&&.del:hover&{ &&
&&&&color:#ff3333; &&
&&&.table-view&{ &&
&&&&position:& &&
&&&&margin-top:&0; &&
&&&&margin-bottom:&0; &&
&&&&padding-left:&0; &&
&&&&list-style:& &&
&&&&background-color:&#f5f5f5; &&
&&&.table-view-cell&{ &&
&&&&position:& &&
&&&&overflow:& &&
&&&&padding:&0px&15 &&
&&&&-webkit-touch-callout:& &&
&&&&margin-bottom:&1 &&
&&&.table-view-cell:after&{ &&
&&&&position:& &&
&&&&right:&0; &&
&&&&bottom:&0; &&
&&&&left:&0 &&
&&&&height:&1 &&
&&&&content:&''; &&
&&&&-webkit-transform:&scaleY(.5); &&
&&&&transform:&scaleY(.5); &&
&&&&background-color:&#c8c7 &&
&&&.table-view-cella:not(.btn)&{ &&
&&&&position:& &&
&&&&display:& &&
&&&&overflow:& &&
&&&&margin:&-0px&-15 &&
&&&&padding:& &&
&&&&white-space:& &&
&&&&text-overflow:& &&
&&&&color:& &&
&&&&background-color:&#75b9f4; &&
&&&&height:&40 &&
&&&&line-height:&40 &&
&&&.navigate-right:after &&
&&&&font-family:&M &&
&&&&font-size:& &&
&&&&line-height:&1; &&
&&&&position:& &&
&&&&top:&50%; &&
&&&&display:&inline- &&
&&&&-webkit-transform:&translateY(-50%); &&
&&&&transform:&translateY(-50%); &&
&&&&text-decoration:& &&
&&&&color:ʚ &&
&&&&-webkit-font-smoothing:& &&
&&&.table-view-cell.collapse&.collapse-content&{ &&
&&&&position:& &&
&&&&display:& &&
&&&&overflow:& &&
&&&&margin:&0px&-15px&0 &&
&&&&padding:&0px&0px&! &&
&&&&-webkit-transition:&height&.35s& &&
&&&&-o-transition:&height&.35s& &&
&&&&transition:&height&.35s& &&
&&&&background-color:& &&
&&&.image-item{ &&
&&&&position:& &&
&&&.image-item&.info{ &&
&&&&position:& &&
&&&&top:0 &&
&&&&left:4 &&
&&&&color:&#ff9900; &&
&&&&font-size:&12&&&&&& &&
&&&class=&bar&bar-nav&&&
&&&&class=&title&拍照或者相册选择图片上传&&
&&&class=&content&&&
&&&&style=&margin-top:&10&&&
&&&&type=&hidden&&id=&ckjl.id&&name=&ckjl.id&&value=&429&&&
&&&&&&class=&collapse-content&&&&
&&&&&&&&class=&row-label&&&
&&&&&&&&id='F_CKJLBS'&class=&row&image-list&&&
&&&&&&&&&class=&image-item&&&id=&F_CKJLB&&onclick=&showActionSheet(this);&&&
&&&src=&../../js/mui.min.js&&&
&var&procinstid&=&0; &&
&//初始化页面执行操作 &&
&function&plusReady()&{ &&
&&//Android返回键监听事件 &&
&&plus.key.addEventListener('backbutton',function(){ &&
&&&myclose(); &&
&&},false); &&
&if&(window.plus)&{ &&
&&plusReady(); &&
&}&else&{ &&
&&document.addEventListener('plusready',&plusReady,&false); &&
&&//加载页面初始化需要加载的图片信息 &&
&&//或者相册IMG_620.jpg &&
&&//imgId:图片名称：0或者IMG_620 &&
&&//imgkey:字段例如：F_ZDDZZ &&
&&//ID：站点编号ID,例如429 &&
&&//src：src=&file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-0.jpg&&&
&&function&showImgDetail&(imgId,imgkey,id,src)&{&& &&
&&&var&html&=&&&; &&
&&&html&+='&&id=&Img'+imgId+imgkey+'&&class=&image-item&&';& &&
&&&html&+='&&id=&picBig&&data-preview-src=&&&data-preview-group=&1&&'+src+''; &&
&&&html&+='&&class=&del&&onclick=&delImg(\''+imgId+'\',\''+imgkey+'\','+id+');&';&&&& &&
&&&html&+='&&&class=&fa&fa-times-circle&';& &&
&&&html&+='&';& &&
&&&html&+=''; &&
&&&$(&#&+imgkey+&S&).append(html); &&
&&//删除图片 &&
&&//imgId:图片名称：IMG_614 &&
&&//imgkey:字段，例如F_ZDDZZ &&
&&//ID：站点编号ID，例如429 &&
&&function&delImg(imgId,imgkey,id){ &&
&&&var&bts&=&[&是&,&&否&]; &&
&&&plus.nativeUI.confirm(&是否删除图片？&,&function(e)&{ &&
&&&&&var&i&=&e. &&
&&&&&if&(i&==&0)&{ &&
&&&&&&var&itemname=id+&img-&+//429img-F_ZDDZZ &&
&&&&&&var&itemvalue=plus.storage.getItem(itemname); &&
&&&&&&//{IMG_614,_doc/upload/F_ZDDZZ-IMG_614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-0.jpg} &&
&&&&&&if(itemvalue!=null){ &&
&&&&&&&var&index=itemvalue.indexOf(imgId+&,&); &&
&&&&&&&if(index==-1){//没有找到 &&
&&&&&&&&delImgfromint(imgId,imgkey,id,index); &&
&&&&&&&}else{& &&
&&&&&&&&delImgFromLocal(itemname,itemvalue,imgId,imgkey,index);&//修改，加了一个index参数 &&
&&&&&&&} &&
&&&&&&& &&
&&&&&&}else{ &&
&&&&&&&delImgfromint(imgId,imgkey,id);& &&
&&&&&&} &&
&&&&},&查勘&,&bts); &&
&&&/*var&isdel&=&confirm(&是否删除图片？&); &&
&&&if(isdel&==&false){ &&
&&function&delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){ &&
&&&&&var&wa&=&plus.nativeUI.showWaiting(); &&
&&&&&var&left=itemvalue.substr(0,index-1); &&
&&&&&var&right=itemvalue.substring(index,itemvalue.length); &&
&&&&&var&end=right.indexOf(&}&); &&
&&&&&rightright=right.substring(end+1,right.length); &&
&&&&&var&newitem=left+ &&
&&&&&plus.storage.setItem(itemname,newitem);& &&
&&&&&myAlert(&删除成功&); &&
&&&&&$(&#Img&+imgId+imgkey).remove(); &&
&&&&&wa.close(); &&
&&//选取图片的来源，拍照和相册 &&
&&function&showActionSheet(conf){ &&
&&&&&var&divid&=&conf. &&
&&&&&&&&&&&var&actionbuttons=[{title:&拍照&},{title:&相册选取&}]; &&
&&&&&&&&&&&var&actionstyle={title:&选择照片&,cancel:&取消&,buttons:actionbuttons}; &&
&&&&&&&&&&&plus.nativeUI.actionSheet(actionstyle,&function(e){ &&
&&&&&&&&&&&&&&if(e.index==1){ &&
&&&&&&&&&&&&&&&getImage(divid); &&
&&&&&&&&&&&&&&}else&if(e.index==2){ &&
&&&&&&&&&&&&&&&galleryImg(divid); &&
&&&&&&&&&&&&&&} &&
&&&&&&&&&&&}&); &&
&&&&&&&&} &&
&&//相册选取图片 &&
&&&&&&&&function&galleryImg(divid)&{ &&
&&&&&&&&&&&&plus.gallery.pick(&function(p){ &&
&&&&&&&&&&&&&//alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_620.jpg &&
&&&&&&&&&&&&&plus.io.resolveLocalFileSystemURL(p,&function(entry)&{ &&
&&&&&&&&&&&&&&//alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_620.jpg &&
&&&&&//alert(entry.name);//IMG_620.jpg &&
&&&&&compressImage(entry.toLocalURL(),entry.name,divid); &&
&&&&},&function(e)&{ &&
&&&&&plus.nativeUI.toast(&读取拍照文件错误：&&+&e.message); &&
&&&&}); &&
&&&&&&&&&&&&},&function&(&e&)&{ &&
&&&&&&&&&&&&},&{ &&
&&&&&&&&&&&&&filename:&&_doc/camera/&, &&
&&&&&&&&&&&&&filter:&image& &&
&&&&&&&&&&&&}&); &&
&&&&&&&&} &&
&&//&拍照 &&
&&function&getImage(divid)&{ &&
&&&var&cmr&=&plus.camera.getCamera(); &&
&&&cmr.captureImage(function(p)&{ &&
&&&&//alert(p);//_doc/camera/0.jpg &&
&&&&plus.io.resolveLocalFileSystemURL(p,&function(entry)&{ &&
&&&&&//alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/0.jpg &&
&&&&&//alert(entry.name);//0.jpg &&
&&&&&compressImage(entry.toLocalURL(),entry.name,divid); &&
&&&&},&function(e)&{ &&
&&&&&plus.nativeUI.toast(&读取拍照文件错误：&&+&e.message); &&
&&&&}); &&
&&&},&function(e)&{ &&
&&&},&{ &&
&&&&filename:&&_doc/camera/&, &&
&&&&index:&1 &&
&&//压缩图片 &&
&&function&compressImage(url,filename,divid){ &&
&&&var&name=&_doc/upload/&+divid+&-&+//_doc/upload/F_ZDDZZ-0.jpg &&
&&&plus.zip.compressImage({ &&
&&&&&src:url,//src:&(String&类型&)压缩转换原始图片的路径 &&
&&&&&dst:name,//压缩转换目标图片的路径 &&
&&&&&quality:20,//quality:&(Number&类型&)压缩图片的质量.取值范围为1-100 &&
&&&&&overwrite:true//overwrite:&(Boolean&类型&)覆盖生成新文件 &&
&&&&function(event)&{& &&
&&&&&//uploadf(event.target,divid); &&
&&&&&var&path&=&name;//压缩转换目标图片的路径 &&
&&&&&//event.target获取压缩转换后的图片url路 &&
&&&&&//filename图片名称 &&
&&&&&saveimage(event.target,divid,filename,path); &&
&&&&},function(error)&{ &&
&&&&&plus.nativeUI.toast(&压缩图片失败，请稍候再试&); &&
&&//保存信息到本地 &&
&&&*&@param&{Object}&url&&图片的地址 &&
&&&*&@param&{Object}&divid&&字段的名称 &&
&&&*&@param&{Object}&name&&&图片的名称 &&
&&function&saveimage(url,divid,name,path){ &&
&&&//alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-0.jpg &&
&&&//alert(path);//_doc/upload/F_ZDDZZ-0.jpg &&
&&&var&&state=0; &&
&&&var&wt&=&plus.nativeUI.showWaiting(); &&
&&&&//&&plus.storage.clear();& &&
&&&namename=name.substring(0,name.indexOf(&.&));//图片名称：0 &&
&&&var&id&=&document.getElementById(&ckjl.id&). &&
&&&var&itemname=id+&img-&+//429img-F_ZDDZ &&
&&&var&itemvalue=plus.storage.getItem(itemname); &&
&&&if(itemvalue==null){ &&
&&&&itemvalue=&{&+name+&,&+path+&,&+url+&}&;//{IMG_614,_doc/upload/F_ZDDZZ-IMG_614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-0.jpg} &&
&&&}else{&& &&
&&&&itemvalueitemvalue=itemvalue+&{&+name+&,&+path+&,&+url+&}&; &&
&&&plus.storage.setItem(itemname,&itemvalue); &&
&&&var&src&=&'src=&'+url+'&'; &&
&&&//alert(&itemvalue=&+itemvalue); &&
&&&showImgDetail(name,divid,id,src); &&
&&&wt.close(); &&
&&//上传图片，实例中没有添加上传按钮 &&
&&function&uploadimge(agree,back)&{ &&
&&//plus.storage.clear(); &&
&&&var&wa&=&plus.nativeUI.showWaiting(); &&
&&&var&DkeyNames=[]; &&
&&&var&id&=&document.getElementById(&ckjl.id&).& &&
&&&var&length=id.toString().& &&
&&&var&ididnmae=id.toString(); &&
&&&var&numKeys=plus.storage.getLength(); &&
&&&var&task&=&plus.uploader.createUpload(getUrl()&+&'url',&{ &&
&&&&&&&&method:&&POST& &&
&&&&&&&}, &&
&&&&&&&function(t,&status)&{ &&
&&&&&&&&if&(status&==&200)&{ &&
&&&&&&&&&console.log(&上传成功&); &&
&&&&&&&&&&$.ajax({ &&
&&&&&&&&&&type:&&post&, &&
&&&&&&&&&&url:&getUrl()&+&'url', &&
&&&&&&&&&&data:&{ &&
&&&&&&&&&&&taskId:&taskId, &&
&&&&&&&&&&&voteAgree:&agree, &&
&&&&&&&&&&&back:&back, &&
&&&&&&&&&&&voteContent:&$(&#assign&).val(), &&
&&&&&&&&&&}, &&
&&&&&&&&&&async:&true, &&
&&&&&&&&&&dataType:&&text&, &&
&&&&&&&&&&success:&function(data)&{ &&
&&&&&&&&&&&wa.close(); &&
&&&&&&&&&&&goList(data); &&
&&&&&&&&&& &&
&&&&&&&&&&& &&
&&&&&&&&&&}, &&
&&&&&&&&&&error:&function()&{ &&
&&&&&&&&&&&wa.close(); &&
&&&&&&&&&&&myAlert(&网络错误，提交审批失败，请稍候再试&); &&
&&&&&&&&&&} &&
&&&&&&&&&}); &&
&&&&&&&&&& &&
&&&&&&&&& &&
&&&&&&&&}&else&{ &&
&&&&&&&&&wa.close(); &&
&&&&&&&&&console.log(&上传失败&);& &&
&&&&&&&&} &&
&&&&&&&} &&
&&&&&&); &&
&&&task.addData(&id&,id); &&
&&&for(var&i=0;&i;i++){&& &&
&&&&var&itemkey=id+&img-&+imgArray[i]; &&
&&&&&if(plus.storage.getItem(itemkey)!=null){ &&
&&&&&var&itemvalue=plus.storage.getItem(itemkey).split(&{&); &&
&&&&&for(var&img=1;img;img++){ &&
&&&&&&var&imgname=itemvalue[img].substr(0,itemvalue[img].indexOf(&,&)); &&
&&&&&&var&imgurl=itemvalue[img].substring(itemvalue[img].indexOf(&,&)+1,itemvalue[img].lastIndexOf(&,&)); &&
&&&&&&task.addFile(imgurl,{key:imgurl}); &&
&&&task.start(); &&
& & & & & & &
& & & & & & &
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
原文链接：
大家感兴趣的内容
12345678910
最近更新的内容}