|
|
@@ -1,26 +1,99 @@
|
|
|
<template>
|
|
|
- <button @click="_openCamera">打开相机</button>
|
|
|
- <button @click="_openGallery">打开相册选择图片并返回路径</button>
|
|
|
- <button @click="_openImageEditor">打开图片编辑器</button>
|
|
|
+ <div>
|
|
|
+ <button @click="_openCamera">打开相机</button>
|
|
|
+ <button @click="_openGallery">打开相册选择图片并返回路径</button>
|
|
|
+ <button @click="_openImageEditor">打开图片编辑器</button>
|
|
|
+
|
|
|
+ <!-- 显示图片的容器 -->
|
|
|
+ <div v-if="imageUrl" class="image-preview">
|
|
|
+ <img :src="imageUrl" alt="Selected Image" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { openCamera, openGallery, openImageEditor } from '@/utils/android'
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
const imagePath = ref('')
|
|
|
+const imageUrl = ref('')
|
|
|
+
|
|
|
const _openCamera = () => {
|
|
|
- imagePath.value = openCamera()
|
|
|
+ if (!window.android) {
|
|
|
+ alert('Android 接口不可用')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ window.android.openCamera()
|
|
|
}
|
|
|
|
|
|
const _openGallery = () => {
|
|
|
- openGallery()
|
|
|
+ if (!window.android) {
|
|
|
+ alert('Android 接口不可用')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ window.android.openGallery()
|
|
|
}
|
|
|
|
|
|
const _openImageEditor = () => {
|
|
|
- openImageEditor(imagePath.value)
|
|
|
+ if (!window.android) {
|
|
|
+ alert('Android 接口不可用')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!imagePath.value) {
|
|
|
+ alert('请先选择图片')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ window.android.openImageEditor(imagePath.value)
|
|
|
+}
|
|
|
+
|
|
|
+// 这个函数应该由 Android 调用
|
|
|
+window.handleImageResult = (path) => {
|
|
|
+ imagePath.value = path
|
|
|
+ // 如果是文件路径,直接使用
|
|
|
+ if (path.startsWith('file://') || path.startsWith('/storage')) {
|
|
|
+ imageUrl.value = path
|
|
|
+ }
|
|
|
+ // 如果是 base64,直接使用
|
|
|
+ else if (path.startsWith('data:image')) {
|
|
|
+ imageUrl.value = path
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 处理 Blob 数据
|
|
|
+window.handleImageBlob = (base64) => {
|
|
|
+ const blob = base64ToBlob(base64, 'image/jpeg')
|
|
|
+ imageUrl.value = URL.createObjectURL(blob)
|
|
|
+}
|
|
|
+
|
|
|
+// 将 base64 转换为 Blob
|
|
|
+const base64ToBlob = (base64, mimeType) => {
|
|
|
+ const byteCharacters = atob(base64.split(',')[1])
|
|
|
+ const byteNumbers = new Array(byteCharacters.length)
|
|
|
+ for (let i = 0; i < byteCharacters.length; i++) {
|
|
|
+ byteNumbers[i] = byteCharacters.charCodeAt(i)
|
|
|
+ }
|
|
|
+ const byteArray = new Uint8Array(byteNumbers)
|
|
|
+ return new Blob([byteArray], { type: mimeType })
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="sass">
|
|
|
+button
|
|
|
+ margin: 10px
|
|
|
+ padding: 8px 16px
|
|
|
+ background: #42b983
|
|
|
+ color: white
|
|
|
+ border: none
|
|
|
+ border-radius: 4px
|
|
|
+ cursor: pointer
|
|
|
+
|
|
|
+
|
|
|
+.image-preview
|
|
|
+ margin-top: 20px
|
|
|
+ img
|
|
|
+ max-width: 100%
|
|
|
+ max-height: 400px
|
|
|
+ border: 1px solid #ddd
|
|
|
+ border-radius: 4px
|
|
|
+
|
|
|
+
|
|
|
</style>
|