更新记录
2.1.2(2024-10-23)
下载此版本
图片矫正demo,可将倾斜角度的图片进行矫正
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.18 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
介绍
本功能基于轻语API
轻语API提供一键生成二维码、OCR文字识别、文字转语音、随机图库、智能Ai助手、地理编码获取(逆地理编码,从内容中获取地址信息(含经纬度))等等API
<template>
<view>
<view class="col" style="margin-top: 20rpx;">
<view @click="pickFile" class="btn">点击选择需要矫正的图片</view>
<image :src="chooseImageUrl" style="max-width: 300rpx;" mode="widthFix" @click="pickFile"></image>
</view>
<view class="col" style="margin-top: 100rpx;">
<view>矫正后的图片</view>
<!-- <image v-if="" style="max-width: 300rpx;" mode="widthFix"></image> -->
<image v-if="showBase64Str && status === 'no'" :src="'data:image/png;base64,' + showBase64Str" mode="widthFix" style="max-width: 300rpx;" />
<!-- 等待进度条 -->
<view v-else-if="status==='loading'" style="margin-top: 50rpx;">
<image src="/static/icon_spinner.png" style="width: 68rpx;height: 68rpx;" class="rotating-element"></image>
</view>
</view>
</view>
</template>
<script>
// 本demo为图片矫正接口请求示例:
// 适用场景:可将角度倾斜的图片进行矫正
export default {
data() {
return {
chooseImageUrl: '',
showBase64Str: '',
status: 'none'
}
},
methods: {
// 请求矫正图片
requestAPI(path){
let that = this;
that.status = 'loading';
// 上传文件
uni.uploadFile({
url: 'https://5555api.com/data/api/correctImageByFile',
filePath: path,
name: 'file',
formData: {
apikey: 'test_app_key_5555api.com',
},
success: function (uploadRes) {
that.status = 'no';
let json = JSON.parse(uploadRes.data);
that.showBase64Str = json.data.data;
},
fail: function (err) {
that.status = 'no';
console.error('上传失败:', err);
}
});
},
// 选择要矫正的图片
pickFile(){
let that = this;
uni.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
success: function (res) {
var tempFilePaths = res.tempFilePaths;
that.chooseImageUrl = tempFilePaths[0];
console.error("路径:", res)
that.requestAPI(tempFilePaths[0]);
}
});
}
}
}
</script>
<style>
.col{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>