html5或者JS怎样调用手机摄像头或者相册?

JavaScript014

html5或者JS怎样调用手机摄像头或者相册?,第1张

你给的网页用的是 <input accept="image/*" type="file">,在IOS端点击时会提示选择图片或相机,安卓端要看浏览器对这两个属性的优化,部分浏览器会直接跳转到资源管理器,优化做得好的可以直接提示选择相册或相机。

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。

1、实现头的方法代码。

2、编写CSS样式的方法代码。

3、html上传代码。

4、JS处理方法代码。

5、测试结果如下。

注意事项:

JavaScript是一种网络脚本语言,在web应用开发中得到了广泛的应用,它经常被用来为网页添加各种动态功能,为用户提供更加流畅美观的浏览效果,通常JavaScript脚本被嵌入到HTML中来实现自己的功能。

            $("#xiangji").click(function () {               

                wx.chooseImage({

                    count: 1, // 默认9

                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有

                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有

                    success: function (res) {

                        var localIds = res.localIds // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

                        $(".vip-tx").find("img").attr("src", localIds)

                        wx.uploadImage({

                            localId: localIds.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得

                            isShowProgressTips: 1, // 默认为1,显示进度提示

                            success: function (res) {

                                var serverId = res.serverId // 返回图片的服务器端ID

                                wx.downloadImage({

                                    serverId: serverId.toString(), // 需要下载的图片的服务器端ID,由uploadImage接口获得

                                    isShowProgressTips: 1, // 默认为1,显示进度提示

                                    success: function (res) {

                                        var downloadId = res.localId // 返回图片下载后的本地ID

                                        alert(downloadId)

                                    }

                                })

                            }

                        })

                       

                    }

                })

            })