-
開発ツールと要件の紹介
(1) 開発ツール: HBuilder
(2) データベース: SQLite
(3) コンポーネント ライブラリ: uni-app
(4) 要件: (バックエンド) 画像情報を暗号化し、フロントエンドは Base64 コードを受け取ります。<image src="imageURL"></image>画像を表示するには、フロントエンドがこの情報を使用して imageURL に変換する必要があります。バックエンドから返される情報に必要なのは「画像タイプ」と「画像情報」です。
-
Base64 コードを画像として表示する
(1) 形式: フロントエンドは、特定の形式を持つ Base64 でエンコードされた画像を表示する必要があります。つまり、data:图片类型;base64,base64码的图片信息
(2) バックエンドから返されたデータを必要な形式につなぎ合わせます。そしてそれを表示します
<template>
<view>
<!--image是uni-app的组件-->
<!--src需动态获取并,从这里可自定义方法，拼接成我们需要的格式然后返回，这样就可以展示了-->
<!--click点击事件用来预览base64图片的->
<image :src="previewPhoto(picture.图片类型, picture.图片信息chunk)" @click="handlePreview(picture.图片类型,picture.图片信息chunk)"></image>
</view>
</template>
<script>
export default {
data(){
},
methods:{
// 将base64码转换，并显示出图片
previewPhoto(type, chunk){
let imgURL = "data" + ":" + type + ";" + "base64," + chunk;
return imgURL;
}
}
}
</script>
- Base64 イメージのプレビュー
uni-app 自带组件image在触发点击事件时，不支持通过previewImage预览图片。因此需要利用插件原則: プレビューする前に、base64 を通常の画像に変換します。変換された画像は自動的にキャッシュに保存され、プレビュー画像のアドレスは変換された画像のキャッシュ アドレスになるため、プレビューできます。
(1) プラグインのアドレスをダウンロードします: https://ext.dcloud.net.cn/plugin?id=123
(2) HBuilderX を使用してプラグインをインポートします
(3) 必要な場所にインポートし、デフォルトのパスは src の下にあります
<template>
<view>
<!--click点击事件用来预览base64图片的->
<image :src="" @click="handlePreview(picture.图片类型,picture.图片信息chunk)"></image>
</view>
</template>
<script>
import {
base64ToPath} from '@/js_sdk/mmmm-image-tools/index.js'
export default {
data(){
},
methods:{
// 预览图片
handlePreview(type, chunk) {
uni.showLoading({
title: '预览加载中'
})
// imgURL为所要预览的base64图片
let imgURL = 'data' + ":" + type+ ";" + "base64," + chunk;
let imagesArry = [];
base64ToPath(imgURL).then(path => {
uni.hideLoading();
imagesArry[0] = path
uni.previewImage({
current: 0,
urls: imagesArry
})
})
},
}
}
</script>