uniapp 图片预加载
时间: 2023-08-07 21:04:07 浏览: 186
图片预加载
可以使用uniapp内置的base64转图片方法,具体步骤如下:
1. 在template中使用image标签,设置src属性为base64字符串。
2. 在script中使用uni.base64ToArrayBuffer方法将base64字符串转为ArrayBuffer类型。
3. 使用uni.getImageInfo方法获取图片信息,包括宽度和高度。
4. 使用uni.canvasToTempFilePath方法将ArrayBuffer类型的图片转为临时文件路径。
5. 将临时文件路径赋值给image标签的src属性,即可显示图片。
示例代码如下:
<template>
<view>
<image :src="imgSrc"></image>
</view>
</template>
<script>
export default {
data() {
return {
base64Str: 'base64字符串',
imgSrc: ''
}
},
methods: {
async base64ToImg() {
const arrayBuffer = await uni.base64ToArrayBuffer(this.base64Str)
const { width, height } = await uni.getImageInfo({ src: this.base64Str })
const tempFilePath = await uni.canvasToTempFilePath({
x: ,
y: ,
width,
height,
destWidth: width,
destHeight: height,
canvasId: 'canvas',
fileType: 'jpg',
quality: 1,
data: arrayBuffer
})
this.imgSrc = tempFilePath.tempFilePath
}
},
mounted() {
this.base64ToImg()
}
}
</script>
阅读全文