APP开发-使用Vue3+vant+html5+ 实现相机拍照，选取相册图片，裁剪图片以及提取图片中的文字等功能（二）

没用使用过Html5+请参考另一篇博客：如何在Vue项目里面使用Html5+

一、实现图片的裁剪

1.1 在上个步骤当中，我们已经实现了拍照和相册里面选取图片，在最后的js方法当中，我们会将拍照或者从相册里面选择的图片的路径拿到，并且去调到裁剪的页面，在这个页面主要使用了Vue 3.0图片裁切插件：vue-picture-cropper，目前这个插件只支持vue3.x的版本。

相关网址：https://chengpeiquan.com/article/vue-picture-cropper.html

这个博客还是对这个插件的使用方式介绍的比较详细的，可以借鉴学习一下。

此页面是在上一个页面拍照或者选择图片，点击确认之后，进行路由跳转到本页面，它所携带的参数是根据图片路径转换为文件对象。

HTML代码

<template><div><vue-picture-cropper:boxStyle="boxStyle":img="pic":options="options"/><van-row ><van-col @click="back" span="11"><van-button plain color="#3BB3C2">取消</van-button></van-col><van-col @click="getImgae" span="11"><van-button color="#3BB3C2">确认</van-button></van-col></van-row></div>
</template>

1.2 在这个页面当中主要有确认和取消两个事件，还有就是获取上个页面传过来的图片路径，确定按钮点击以后，会跳转到识别结果页面。

js代码

  setup() {const { proxy } = getCurrentInstance();const state = reactive({pic: '',// 裁剪区域的样式boxStyle: {width: '100%',height: '80%',backgroundColor: '#f8f8f8',margin: 'auto',},// 设定参数options: {viewMode: 1,dragMode: 'crop',},});onMounted(async () => {// 获取路由以及参数const params = proxy.$router.currentRoute.value.query;// 图片地址// 将图片转换为base64base64Img(params.imgUrl).then((res) => {state.pic = res;});});// 获取截图const getImgae = () => {proxy.$router.push({path: '/scanResult',query: {// 获取裁切后的 base64 结果，可用于本地预览展示 imgUrl: cropper.getDataURL(),},});};// 取消返回const back = () => {proxy.$router.go(-1);};return {...toRefs(state),getImgae,back,};},

在此页面点击确认以后，我们还是要把裁剪好的图片继续传递到下一个页面，此时路由的图片参数可以使用cropper实例的API方法getDataURL(),
以下图片是截取上面博客的内容：

页面效果图

二、下一篇讲述如何提取图片中的文字

APP开发-使用Vue3+vant+html5+ 实现相机拍照，选取相册图片，裁剪图片以及提取图片中的文字等功能（二）相关推荐

App开发-使用Vue3+Vant组件实现历史搜索记录功能
使用Vue3+Vant组件实现App历史搜索记录功能最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue ...
Android实现相机拍照和相册选择以及图片裁剪适配Android10以上
之前写的一个工具类,在华为手机Android版本12上无法返回图片路径,提示不是一个文件或是文件不存在. 所以更改此工具类如下: package com.suoer.comeonhealth.laib ...
h5（网页）调用相机拍照和相册，实现图片上传功能
情景描述: 一个h5或者网页中需要上传图片功能,并且这个功能可以选择本地的图片或者拍照上传: 实现方法: 我们在网页中是可以直接调用手机的相机或者上传本地图片的,也就是说,我们是有使用本地图片文件和 ...
Android开发之调用相机拍照与本地图库选择图片
引用链接 Android开发之调用相机拍照与本地图库选择图片 Android调用相机实现拍照功能部分截图引言小项目有一个访问相册的需求,在网上查找得到两位大神博客指点,但博客发布时间过旧,难免因 ...
兼容Android 11 相机拍照,从相册中选择,裁剪图片
由于android 11对存储空间进行了更新,导致无法进入裁剪或者裁剪后无法保存,返回路径等问题. android 10以下可以参考:android 相机拍照,从相册中选择,裁剪图片前面部分和之前的 ...
android 打开相册的权限,Android 启动系统相机，相册，裁剪图片及6.0权限管理
在日常开发中,我们经常需要用到上传图片的功能,这个时候通常有两种做法,第一种,从相机获取,第二种,从相册获取.今天这篇博客主要讲解利用系统的Intent怎样获取? 主要内容如下怎样通过相机获取我们 ...
uni-app用uni.chooseImage API调用相机或从相册中选择图片
uni-app用uni.chooseImage API调用相机或从相册中选择图片 chooseImage: function() {var _this = this;uni.chooseImage({ ...
Flutter实现相机拍照和相册选择
Flutter实现相机拍照和相册选择添加image_picker依赖:https://pub.dev/packages/image_picker/install 给权限(安卓) // 写入文件权限& ...
Android 启动系统相机，相册，裁剪图片及6.0权限管理
在日常开发中,我们经常需要用到上传图片的功能,这个时候通常有两种做法,第一种,从相机获取,第二种,从相册获取.今天这篇博客主要讲解利用系统的Intent怎样获取? 主要内容如下 - 怎样通过相机获取 ...

APP开发-使用Vue3+vant+html5+ 实现相机拍照，选取相册图片，裁剪图片以及提取图片中的文字等功能（二）

一、实现图片的裁剪

1.2 在这个页面当中主要有确认和取消两个事件，还有就是获取上个页面传过来的图片路径，确定按钮点击以后，会跳转到识别结果页面。

二、下一篇讲述如何提取图片中的文字

APP开发-使用Vue3+vant+html5+ 实现相机拍照，选取相册图片，裁剪图片以及提取图片中的文字等功能（二）相关推荐

最新文章

热门文章