h5 js调用移动端相机相册

效果：

点击从手机相机获取图片或打开相机拍摄图片，触屏缩放移动加载的图片到合适位置

注意这里的几个坑：

1 在红米K40上出现了微信浏览器点击，触发change事件后只能调到相册，无法弹出“相机或相册选择框”，而且无法选中相片的问题。

参考前段H5开发，小米上用input File 为什么获取不到照片的数据？ - 知乎

解决方法如下代码。

<!-- 写成 accept="image/png,image/jpeg,image/gif"   时  红米k40 微信浏览器无法打开相册  要写成  accept="image/*"  --><!-- <input type="file" id="image_uploads" multiple=""  class="inputFile" accept="image/png,image/jpeg,image/gif"  > --><!-- <input type="file" id="image_uploads" multiple=""  class="inputFile" accept="image/*"  > -->

只不过解决后因为问题2 又都注释掉了。

2 在ios系统上出现了第一次点击，经常无法触发change事件的情况

具体现象：安卓手机上，微信浏览器、自带浏览器都没有问题。苹果手机上，第一次点击，有时候无法触发change事件(复现频率较高)，第二次点击就好了。访问过一次，点击，好了后，刷新页面也不一定能复现问题。(坑死)
参考 https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only

解决方法：
将initNew() 方法里下面这两行注释掉

  // this.input = document.querySelector('#image_uploads')// this.input.addEventListener('change', this.updateImageDisplay)

将 template 里的 <input> 元素注释掉

<!-- 写成 accept="image/png,image/jpeg,image/gif"   时  红米k40 微信浏览器无法打开相册  要写成  accept="image/*"  --><!-- <input type="file" id="image_uploads" multiple=""  class="inputFile" accept="image/png,image/jpeg,image/gif"  > --><!-- <input type="file" id="image_uploads" multiple=""  class="inputFile" accept="image/*"  > -->

换成initNew() 方法里

// input 元素绑定 change 事件 let mobileCamera = document.querySelector('#mobileCamera')let input =  document.createElement("input"); input = document.body.appendChild(input)input.type = "file"input.id = "image_uploads"input.className="inputFile";input.multiple= trueinput.accept="image/png,image/jpeg,image/gif"input.style.width=  "1%"input.style.height = "1%"input.style.position =  'absolute';input.style.opacity = 0;input.addEventListener('change', this.updateImageDisplay)

注意这里

input = document.body.appendChild(input) ，绑定在 document.body 上，一开始绑定在 <div id="mobileCamera" class="mobileCamera" v-loading="loading"> 上，未解决问题，至于绑定在其他dom上可以不，还未测试。

绑定change事件用，input.addEventListener('change', this.updateImageDisplay)

用onchange 未生效。

3 功能设计里，是用img 或者div点击后，去触发 input 元素的click事件的。而这种情况下，在ios系统上出现了 img、div 需要双击的情况才能触发click，input 支持单击。 Android手机无此问题。
参考 tap事件_苏醒!的博客-CSDN博客_tap事件

解决方法

        let mobileCamera = document.querySelector('#mobileCamera')// 用 tab 换掉 click ，click在ios safari浏览器上有 单击失效，需要双击  的问题this.bindTapEvent(mobileCamera,(e)=>{input.click();})bindTapEvent(dom,callback){var startTime = 0;var isMove = false;dom.addEventListener('touchstart',function(){startTime = Date.now();console.log(startTime);});dom.addEventListener('touchmove',function(){isMove = true;});dom.addEventListener('touchend',function(e){console.log(Date.now()-startTime);if((Date.now()-startTime)<250&&isMove == false){callback&&callback.call(this,e)}else{console.log('失败');}isMove = false;startTime = 0;});},

直接上代码

<template><div class="component"><div id="mobileCamera" class="mobileCamera"  v-loading="loading"><!-- 写成 accept="image/png,image/jpeg,image/gif"   时  红米k40 微信浏览器无法打开相册  要写成  accept="image/*"  --><!-- <input type="file" id="image_uploads" multiple=""  class="inputFile" accept="image/png,image/jpeg,image/gif"  > --><!-- <input type="file" id="image_uploads" multiple=""  class="inputFile" accept="image/*"  > --><div class="imgPreviewDiv" v-show="src"><img  id="mobileCameraPreview" :src="src" class="imgPreview"   ></div><img src="./assets/b.png" class="imgCamera"  v-if="show"></div></div>
</template>
import Hammer from 'hammerjs'
import axios from 'axios'export default {name: 'conponent01',props: {},computed: {},data () {return {input: undefined,src: "",show1:false,show:true,loading:false,// 拖动缩放imgScale: 1,oldScale: 1,imgPos: {x: 0,y: 0},}},mounted () {// 图片操作 移动 缩放this.zoom()this.initNew()},methods: {// 同事写的   移动端 移动、缩放元素zoom(){var square = this.$el.querySelector('#mobileCameraPreview')let that = this// Create an instance of Hammer with the reference.var hammer = new Hammer(square)hammer.get('pinch').set({ enable: true })// Subscribe to a quick start event: press, tap, or doubletap.// For a full list of quick start events, read the documentation.hammer.on('panend', function (e) {that.imgPos.x += e.deltaXthat.imgPos.y += e.deltaY})hammer.on('pan', function (e) {// console.log('pan=====', e)square.style.transform = `matrix(${that.imgScale},0,0,${that.imgScale},${that.imgPos.x + e.deltaX},${that.imgPos.y + e.deltaY})`})hammer.on('pinch', function (e) {that.imgScale = Math.max(Math.min(that.oldScale * e.scale, 10), 1)square.style.transform = `matrix(${that.imgScale},0,0,${that.imgScale},${that.imgPos.x},${that.imgPos.y})`})hammer.on('pinchend', function (e) {that.oldScale = that.imgScale})},initNew () {// input 元素绑定 change 事件 let mobileCamera = document.querySelector('#mobileCamera')let input =  document.createElement("input"); input = document.body.appendChild(input)input.type = "file"input.id = "image_uploads"input.className="inputFile";input.multiple= trueinput.accept="image/png,image/jpeg,image/gif"input.style.width=  "1%"input.style.height = "1%"input.style.position =  'absolute';input.style.opacity = 0;input.addEventListener('change', this.updateImageDisplay)//  在ios系统上 出现了  第一次点击，经常无法触发change事件的情况// 参考  https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only//  将下面这两行  和  template 里的  <input> 元素注释掉  换成上面这个 createElement('input')  // this.input = document.querySelector('#image_uploads')// this.input.addEventListener('change', this.updateImageDisplay)// 用 tab 换掉 click ，click在ios safari浏览器上有 单击失效，需要双击  的问题this.bindTapEvent(mobileCamera,(e)=>{input.click();})},// 参考 https://blog.csdn.net/qq_42309685/article/details/102526869bindTapEvent(dom,callback){var startTime = 0;var isMove = false;dom.addEventListener('touchstart',function(){startTime = Date.now();console.log(startTime);});dom.addEventListener('touchmove',function(){isMove = true;});dom.addEventListener('touchend',function(e){console.log(Date.now()-startTime);if((Date.now()-startTime)<250&&isMove == false){callback&&callback.call(this,e)}else{console.log('失败');}isMove = false;startTime = 0;});},imgClick () {this.input.click();},updateImageDisplay () {let _this = thisthis.loading = trueconst curFiles = this.input.filesif (curFiles.length === 0) {// no file} else {for (const file of curFiles) {// 方法1  上传后台  返回服务器端图片地址 赋值给 srcvar formData = new FormData()formData.append('files',file)axios({method: 'post',url: 'https://xxxxxx/api/ossupload/uploadFile',data: formData}).then((res)=>{console.log(res.data.data[0].path)_this.show1 = true_this.show = false_this.$nextTick(()=>{_this.src = res.data.data[0].path_this.loading = false// 图片操作相关_this.imgScale = 1_this.oldScale = 1_this.imgPos = {x: 0,y: 0}_this.$el.querySelector('#mobileCameraPreview').style.transform = `matrix(1,0,0,1,0,0)`})})// 方法2  读成 base64 赋值给 src// var reader = new FileReader()// reader.readAsDataURL(file)// reader.onload = function () {//   _this.show1 = true//   _this.show = false//   _this.$nextTick(()=>{//     _this.src = this.result//     _this.imgScale = 1//     _this.oldScale = 1//     _this.imgPos = {//       x: 0,//       y: 0//     }//     _this.$el.querySelector('#mobileCameraPreview').style.transform = `matrix(1,0,0,1,0,0)`//   })// }}}},},}
</script><style scoped>.component {width: 100%;height: 100%;}.mobileCamera{width: 100%; height: 100%;cursor: pointer;border-radius: 50%;display:flex;justify-content: center;   align-items: center;  flex-direction: column;}.imgPreviewDiv {width: 100%;height: 100%;border-radius: 50%;box-shadow: 0 0 15px 10px #d5d1a775; overflow: hidden;display:flex;justify-content: center;   align-items: center;  flex-direction: column;}.imgPreview {width: 100%;box-shadow: 0 0 15px 10px #d5d1a775; }.imgCamera {width: 80px; height: 80px;}.inputFile {width: 1%;height: 1%;position:absolute;opacity: 0;}</style>

h5 js调用移动端相机相册相关推荐

调用移动端相机以及相册功能
HTML5页面如何在手机端浏览器调用相机.相册功能最近在做一个公司的保险信息处理系统项目,开发微信端浏览器访问的HTML5的页面,页面中有一个标签,iOS直接就支持吊起相机拍照或是相册选择,但and ...
asp.net页面回传与js调用服务端事件，Postback的原理
Asp.net 中在客户端触发服务器端事件分为两种情况: 一. WebControls中的Button 和HtmlControls中的Type为submit的HtmlInputButton 这两种 ...
asp.net页面回传与js调用服务端事件、PostBack的原理详解(转)
Asp.net中服务端控件事件是如何触发的 Asp.net 中在客户端触发服务器端事件分为两种情况: 一. WebControls中的Button 和HtmlControls中的Type为subm ...
使用JS调用手机摄像头和相册
Html <h2 class="title-detail">图片描述</h2> <input type="hidden" id=& ...
asp.net页面回传与js调用服务端事件、PostBack的原理详解
ASP.ENT中,有两种实现页面PostBack的机制,不管是哪种回传方式,最终均是Form表单提交. 一.原始的Form表单提交 WebControls中的Button和ImageButton控件, ...
Android关于第三方h5在webview调用摄像头及相机的处理
参考资料: 深坑之Webview,解决H5调用android相机拍照和录像除了没有适配6.0以上的动态申请以及拦截h5的方法不同,其余均参考以上文章因为app和银行合作,在banner页投放了银行 ...
Node.js 通过https服务器利用js调用网络摄像头
前言最近写了一个js调用摄像头的代码,整体实现是非常简单,但是放到服务器上,通过外网访问后就会出现一个警告我们需要通过js调用摄像头,但在此之前我们需要创建一个https服务器.所以,这篇博文就是 ...
ajax调用第三方web服务,js调用soapWebService服务
js调用soapWebService服务什么是 SOAP? SOAP 指简易对象访问协议 SOAP 是一种通信协议 SOAP 用于应用程序之间的通信 SOAP 是一种用于发送消息的格式 SOAP 被 ...
h5调用安卓原生相机、相册、电话、录像，且兼容安卓系统8.0
前言安卓原生组件webview加载h5的URL,若要h5调用安卓原生相机和相册有效需要做以下操作. 测试机:魅蓝note2 系统5.1.1 华为荣耀畅玩7x 系统8.0.0 一.h5页面相关方 ...

h5 js调用移动端相机相册

h5 js调用移动端相机相册相关推荐

最新文章

热门文章

h5 js调用移动端 相机 相册

h5 js调用移动端 相机 相册相关推荐

最新文章

热门文章

h5 js调用移动端相机相册

h5 js调用移动端相机相册相关推荐