uni-app图片本地路径/网络路径转base64流 压缩

uniapp可通过此方法对本地路径 如: …/…/static/img/01.png 或者网络路径图片转为base64

urlTobase64(url) {
	var toBase64Url;
	uni.request({
	url: url,
	method: 'GET',
	responseType: 'arraybuffer',
	success: async res => {
			let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
			toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符,在页面无法显示
			console.log(toBase64Url)
		}
	});
},

这时如果需上传该文件 要看你们后台是如何接收的 如果后台接收的base64 则直接传base64。

然而我在用uniapp开发app遇到的是,我在浏览器中调试可以直接上传base64形式 ,在真机调试或者打包之后 直接找不到本地路径的图片了 或者是传base64直接报500错误,后来处理这个问题 使用了官方文档的一个压缩图片接口的api

uni.compressImage({
  src: '/static/logo.jpg',
  quality: 100,
  success: res => {
    console.log(res.tempFilePath)
  }
})

通过uni.compressImage 拿到一个本地路径res.tempFilePath 上传本地路径就Ok啦

uni-app实现微信小程序、app端的图片转base64

下载或者安装image-tools,把这个插件下载在项目中
uni-app图片本地路径/网络路径转base64流 压缩_第1张图片

index.vue文件

<template>
	<view>
		<view @click="chooseImg">拍照view>
		<view v-if="imgList.length > 0">
			<view v-for="(item,index) in imgList" :key="index">
				<image :src="item" mode="">image>
			view>
		view>
	view>
template>
 
<script>
	import { pathToBase64, base64ToPath } from '../../utils/image-tools/index.js'
	export default {
		data() {
			return {
				imgList: [],
			}
		},
		methods:{
			chooseImg(){
				let that = this;
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						// #ifdef MP-WEIXIN
						uni.getFileSystemManager().readFile({
							filePath: tempFilePaths[0],
							encoding: 'base64',
							success: r => { 
								console.log(r.data)
								let base64 = 'data:image/jpeg;base64,'  + r.data;
								that.imgList.push(base64)
							}
						})
						// #endif
						// #ifdef APP-PLUS
						pathToBase64(tempFilePaths[0])
						  .then(base64 => {
							that.imgList.push(base64)
						  })
						  .catch(error => {
						    console.error(error)
						  })
						// #endif
				    }
				});
			}
		}
	}
script>
 
<style>
style>

注意点:

微信小程序

// #ifdef MP-WEIXIN
	uni.getFileSystemManager().readFile({
		filePath: tempFilePaths[0],
		encoding: 'base64',
		success: r => { 
		console.log(r.data)
		let base64 = 'data:image/jpeg;base64,'  + r.data;
		that.imgList.push(base64)
	}
})
// #endif

就可以达到要求,也就不用下载或者安装插件。此外需注意,该方法需要在返回的base64码前面拼接’data:image/jpeg;base64,'才能图片正常回显。

app端

pathToBase64(tempFilePaths[0])
	.then(base64 => {
			that.imgList.push(base64)
	})
	.catch(error => {
			console.error(error)
})

安装或者下载插件后,直接使用,可以做到在app和微信小程序同时将图片转换为base64。
此外需注意,该方法返回的base64带有’data:image/jpeg;base64,'所以可以直接用来图片回显。

支付宝小程序

问题:使用 image-tools 插件时,支付宝小程序真机上测试,直接报错,报错信息为无权限调用该接口

页面标签部分

<view>
        <canvas id="myCanvas" class="canvas-view" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }">canvas>
view>

逻辑部分

export default {
	data() {
		return {
			canvasWidth: 200, //绘制canvas的默认宽度
			canvasHeight: 200, //绘制canvas的默认高度
			base64: ''
		};
	},
	methods: {
		//选择上传图片
		chooseUploadImg() {
			const ctx = uni.createCanvasContext('myCanvas');
			const that = this;
			uni.chooseImage({
				count: 1,
				success: res => {
					uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: function(image) {
                          //需要动态更新canvas标签的高宽度
							that.canvasWidth = image.width;
							that.canvasHeight = image.height;
							ctx.drawImage(res.tempFilePaths[0], 0, 0, image.width, image.height);
							ctx.draw(false, () => {
								ctx.toDataURL({}).then(dataURL => {
									const base64Str = dataURL.replace('data:image/png;base64,', '');
                                    // doSomething
								});
							});
						}
					});
				},
				fail: e => {
					console.log('choose img fail');
				}
			});
		}
	}
};
</script>

样式部分

canvas-view {
	position: absolute;
	top: -2000px;
	opacity: 0;
}

步骤

  • 选择图片
  • 获取图片信息
  • canvas绘制图片~~~~
  • canvas原生方法获取base64
  • 其他处理

/该接口的官方文档如下**/

uni.compressImage()

压缩图片接口,可选压缩质量

平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序
1.9.7+ 自定义组件编译模式 x √(基础库版本>=3.110.3)

OBJECT 参数说明

属性 类型 默认值 必填 说明
src String 图片路径,图片的路径,可以是相对路径、临时文件路径、存储文件路径
quality Number 80 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

属性 类型 说明
tempFilePath String 压缩后图片的临时文件路径

你可能感兴趣的:(小程序,微信小程序,uni-app)