uniapp知识

1、uniapp选择图片并转为base64再上传

//先下载 image-tools 插件
npm i image-tools --save

//引入刚下载的插件
import { pathToBase64 } from 'image-tools'
methods:{
	chooseImage(){
		return new Promise((resolve,reject)=>{
			uni.chooseImage({
				count:5,
				success(e) {
					resolve(e.tempFilePaths)
				}
			})
		})
	},
	async getBase64(){
		let imgs = await this.chooseImage();
		let base64Arr = []
		for(var i = 0; i < imgs.length; i++){
			let base64 = await pathToBase64(imgs[i]);
			//下面三行注释的代码的意思就是 有些后端写的程序，它不支持jpeg的，所以需要把它转为png
			// if(base64.indexOf('jpeg') != -1){
			// 	base64 = base64.replace('jpeg' , 'png');
			// }
			base64Arr.push(base64)
		}
		console.log(base64Arr);
	}
}

2、uniapp 图片上传加水印

<view style="">
	<canvas :style="{ width: canvasWidth, height: canvasHeight }" canvas-id="firstCanvas" id="firstCanvas"></canvas>
	<img  :src="src" alt="" width="100" height="100">
</view>

#firstCanvas{
	width: 1px;
	height: 1px;
	position: fixed;
	left: 9999999999px;
	top: 99999999999px;
}

chooseImage(){
	return new Promise((resolve,reject)=>{
		uni.chooseImage({
			success(e){
				let path = e['tempFilePaths'][0]
				resolve(path)
			}
		})
	})
},

getImageInfo(path){
	return new Promise((resolve,reject)=>{
		uni.getImageInfo({
			src:path,
			success(res) {
				resolve(res)
			}
		})
	})
},

canvas(e){
	console.log(e , 'eee')
	let that = this;
	const context = uni.createCanvasContext('firstCanvas' )
	this.canvasWidth = `${e.width}px`
	this.canvasHeight = `${e.height}px`
	context.fillRect(0, 0 , this.canvasWidth , this.canvasHeight)
	context.drawImage(e.path, 0, 0 , this.canvasWidth , this.canvasHeight)
	//下面两行是插入logo的
	//let imgurl = '../../static/logo.png'
	//context.drawImage(imgurl , 30 , 50 , 30 , 50)
	context.beginPath();
	context.setFontSize(50);
	context.setFillStyle("rgba(255,0,0,0.4)");
	context.fillText("我是水印", 50 , 50);
	//注意下面的延迟执行，因为有些时候，canvas绘制还没加截完就执行了。
	//所以，这儿需要一个延迟，不然，绘制出来的图片有可能会是空白
	//下面的很多个水印的也是一样的道理
	setTimeout(()=>{
		context.draw(false , ()=>{
			uni.canvasToTempFilePath({
				canvasId:'firstCanvas',
				success:(ea)=>{
					console.log(ea , 'ea')
					let tempFilePath = ea.tempFilePath;
					let r = base64ToPath(tempFilePath)
					console.log(r)
					that.src = tempFilePath;
				}
			})
		})
	} , 500)
},


//下面这段是有很多个很多个水印的
canvas(e){
	console.log(e , 'eee')
	let that = this;
	const context = uni.createCanvasContext('firstCanvas' )
	this.canvasWidth = `${e.width}px`
	this.canvasHeight = `${e.height}px`
	context.fillRect(0, 0 , this.canvasWidth , this.canvasHeight)
	context.drawImage(e.path, 0, 0 , this.canvasWidth , this.canvasHeight)
	// let imgurl = '../../static/logo.png'
	// context.drawImage(imgurl , 30 , 50 , 30 , 50)
	context.rotate(45 * Math.PI / 180);
	for (let i = 0; i <= 50; i++) {
		context.setFontSize(50);
		context.setFillStyle("rgba(255,0,0,0.4)");
		context.fillText("我是水印", 0, i * 170);
		for (let j = 0; j <= 50; j++) {
			context.beginPath();
			context.setFontSize(50);
			context.setFillStyle("rgba(255,0,0,0.4)");
			context.fillText("我是水印", j * 340, i * 170);
		}
	}
	for (let i = 0; i < 50; i++) {
		context.beginPath();
		context.setFontSize(50);
		context.setFillStyle("rgba(255,0,0,0.4)");
		context.fillText("我是水印", 0, -170 * i);
		for (let j = 1; j < 50; j++) {
			context.beginPath();
			context.setFontSize(50);
			context.setFillStyle("rgba(255,0,0,0.4)");
			context.fillText("我是水印", 340 * j, -170 * i);
		}
	}
	context.rotate(-45 * Math.PI / 180);
	setTimeout(()=>{
		context.draw(false , ()=>{
			uni.canvasToTempFilePath({
				canvasId:'firstCanvas',
				success:(ea)=>{
					console.log(ea , 'ea')
					let tempFilePath = ea.tempFilePath;
					let r = base64ToPath(tempFilePath)
					console.log(r)
					that.src = tempFilePath;
				}
			})
		})
	} , 500)
},



afterReada(e){
	this.chooseImage()
	.then(res=>{
		return this.getImageInfo(res);
	})
	.then(res=>{
		return this.canvas(res);
		//console.log(res , 'res')
	})
	.catch(err=>{
		console.error(err)
	})
}