Vue.js 实现调用手机相机与相册功能

"这篇文档介绍了如何在Vue.js项目中实现调用手机摄像头和相册功能，提供了相关的HTML和JavaScript代码示例。" 在Vue.js应用中，为了实现调用手机摄像头拍照和从相册选择图片的功能，我们可以利用HTML5的`<input type="file">`元素配合`accept`属性来触发设备的相机和图库。同时，可以借助于第三方库如Vant UI的`<van-action-sheet>`组件来创建底部操作菜单，提供拍照和选择相册的选项。 HTML部分： ```html <div> <!-- 显示图片的区域 --> <div class="imgBox name"> <img :src="imgSrc" /> </div> <!-- 底部操作菜单 --> <van-action-sheet v-model="show1"> <ul> <li class="paizhao" @click="captureImage()">拍照</li> <li class="pai" @click="galleryImg()">从相册选择</li> <li class="paizhao" @click="quxiao()">取消</li> </ul> </van-action-sheet> </div> ``` 这里的`<van-action-sheet>`组件包含了三个选项，分别用于拍照、从相册选择和取消操作。通过绑定`v-model`到`show1`，可以根据用户的选择显示或隐藏菜单。 JavaScript部分： 在Vue的数据对象中，我们需要声明用于存储图片路径的变量： ```javascript data() { return { imgSrc: "", // 展示的图片路径 tupianlist: "", // 展示的图片容器 }; }, ``` 然后，在`methods`对象中定义对应的事件处理函数： ```javascript methods: { // 拍照 captureImage() { // 这里需要使用设备API，例如使用plus.camera.getCamera()来调用摄像头，具体实现根据实际环境 }, // 从相册选择 galleryImg() { let _this = this; console.log("从相册中选择图片:"); plus.gallery.pick(function (path) { _this.imgSrc = path; // path是本地路径 let img = new Image(); img.src = path; img.onload = function () { var w = that.width, // 320 h = that.height, // 426 scale = w / h; w = 320 || w; h = w / scale; var canvas = document.createElement("canvas"); canvas.width = 300; // 这个设置不能丢，否者会成为canvas默认的300*150的大小 canvas.height = 300; // 这个设置不能丢，否者会成为canvas默认的300*150的大小 var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, 300, 300); var base64 = canvas.toDataURL( "image/jpeg", // 图片类型，可以是jpg/png等 1.0 // 图片质量，范围0-1 ); // 在这里，你可以将base64编码的图片数据发送到服务器或进行其他操作 }; }); }, // 取消 quxiao() { // 关闭操作菜单，具体实现根据Vant UI的API }, }, ``` `galleryImg()`方法中，我们使用了`plus.gallery.pick`来获取用户选择的图片路径，然后通过`Image`对象加载图片并调整大小，最后将图片转换为Base64编码，以便进一步处理或展示。需要注意的是，这部分代码可能需要在具备`plus`对象的环境中运行，这通常是使用HBuilderX或者MUI等移动端开发框架时的情景。 要在Vue项目中实现调用手机摄像头和相册功能，需要结合HTML5的文件API以及可能的原生设备API（如在Hybrid应用中），并且可以借助Vue组件库来增强用户体验。在实际项目中，还需要考虑兼容性、权限管理、图片上传等问题。