Uniapp handles background transfer pictures

1.uniapp Process image binary stream

uni.request({
					url: "http://192.168.2.8:8080/common/download?name="+`${this.vuex_user.avatar}`,
					responseType:"ArrayBuffer",
					
					success: (res)=>{
						const imgsb = res.data;
						this.imgUrl = 'data:image/jpeg;base64,'+uni.arrayBufferToBase64(imgsb)
					}
				})

2. Upload and modify avatar photos

// Click the small icon next to the avatar 
			click(index) {
				// Choose camera or album 
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], // This should be noted ,camera Drop photo ,album Is to open the mobile photo album 
					success: (res) => {
						console.log(res);
						this.imgUrl = res.tempFiles[0].path; //src Required parameter name 
						const tempFilePaths = res.tempFilePaths;
						// Select photos to upload 
						uni.uploadFile({
							url: 'http://192.168.2.8:8080/common/upload', // Just for the sample , Unreal interface address 
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							// After uploading successfully, modify the picture 
							success: (uploadFileRes) => {
								// The data to be transferred and modified needs to be the name , Not the path 
								const urls = JSON.parse(uploadFileRes.data).data 
								const params = {
									avatar: urls
								}
								this.$u.api.changeUser(params).then(res => {
									console.log(res);
								})
							}
						});
					}
				})

			}

3. stay uniapp Get the current route

let routes = getCurrentPages(); //  Gets the currently opened page routing array 
	let curRoute = routes[routes.length - 1].route //  Get the current page route , That is, the last open page route 

 4. Drop down content

data() {
			return {
				show: false, // The state of the modal box 
				checked: false, // The state of closing the channel 
				content: " After closing , Users will not be able to use Alipay (1.1) Recharge !"
			}
		},

methods: {
			// Click on switch Switching Selector 
			clickFn() {
				if (this.checked) {
					this.show = true;

				} else {
					uni.showToast({
						icon: "none",
						title: ' Saved successfully '
					})
				}
			},
			// Determination of modal box 
			sure() {
				uni.showToast({
					icon: "none",
					title: ' Saved successfully '
				})
			},
			// Click to view the submitted materials 
			returnzhifu() {
				uni.navigateTo({
					url: '/pages/auth/zhifubao1'
				})
			},
			returntwoCode() {
				uni.navigateTo({
					url: '/pages/auth/twoCode'
				})
			}
		}

<uni-collapse>
			<uni-collapse-item titleBorder="none" :show-arrow="false">
				<template v-slot:title>
					<view class="content">
						<view class="image-box">
							<u-icon name="zhifubao" color="white" size="80"></u-icon>
						</view>
						<view class="center">
							<view class="top">
								 Alipay (1.1)
							</view>
							<view class="btm">
								 Lottery people recharge the Alipay account rate applied by the shopkeeper in real time 0.3%
							</view>
						</view>

						<view class="right">
							<view>
								{
   {checked?' closed ':' It has been opened '}}
							</view>
							<view class="jiantou">

								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</template>
				<view>
					<u-modal v-model="show" @confirm="sure" :show-cancel-button='true' :content="content"
						title=" Confirm to close Alipay (1.1) channel ?"></u-modal>
				</view>
				<view class="content aice">
					<view class="top">
						<text class="text"> Close the channel </text>
						<view class="" @click="clickFn">
							<u-switch v-model="checked"></u-switch>
						</view>

					</view>

					<view class="text-box">
						<view class="top1" @click="returnzhifu">
							 Check the submitted materials 
						</view>
						<view class="btm" @click="returntwoCode">
							 Reauthorize 
						</view>
					</view>

				</view>

			</uni-collapse-item>

		</uni-collapse>

 

 5. Generate posters from pictures and QR codes

<shareImages ref="canvasa" :goodsTitle="vuex_user.name" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"
			:shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl" @success="shareSuccess">
		</shareImages>

data() {
			return {
				imgUrl: '', // QR code image address 
				imgUrl1: '',
				canvasImages: '',
				canvasWidth: 500, //  Width 
				canvasHeight: 980, //  Height 
				shareImage: '../../static/download.png', //  Background image 
				qrSize: 120, //  QR code size 
				qrUrl: '', // Path of QR code 
				

			}
		},

gettwoCode() {
				uni.request({
					url: "http://192.168.2.10:8080/common/QRdownload?name=" + `${this.vuex_user.userImg}`,
					responseType: "ArrayBuffer",
					success: (res) => {
						const imgsb = res.data;
						this.qrUrl = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(imgsb);

					}
				});
				this.$refs.canvasa.canvasCreate();
			}

<template>
	<view style="position: fixed;z-index: -9999;">
		<canvas :canvas-id="canvasID" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}"></canvas>
		<view v-if="qrCode == ''">   // Can be removed ,
			<QRCode ref="qrcode" />
		</view>
	</view>
</template>

<script>
	import QRCode from "../qr_code/qrcode.vue"
	var _this;
	export default {
		name: 'canvas-images',
		props: {
			// canvasID  Equate to  canvas-id
			canvasID: {
				Type: String,
				default: 'shareCanvas'
			},
			canvasWidth: { //  Canvas width 
				Type: 'int',
				default: 375
			},
			canvasHeight: { //  Canvas height 
				Type: 'int',
				default: 600
			},
			// shareTitle:{	//  Share the title 
			// 	Type: 'String',
			// 	default: ' I am the title of this picture '
			// },
			goodsTitle: { //  Product promotion Title 
				Type: 'String',
				default: ''
			},
			shareImage: { //  Sharing pictures 
				Type: 'String',
				default: ''
			},
			qrSize: { //  QR code size 
				Type: 'int',
				default: 100
			},
			qrUrl: { //  Link to generate QR code 
				Type: 'String',
				default: ''
			}
		},
		components: {
			QRCode
		},
		data() {
			return {
				qrCode: '', //  QR code 
			}
		},
		mounted() {
			_this = this;

		},
		methods: {
			//  Create QR code 
			canvasCreate(){
				_this.$refs.qrcode.make({size: _this.qrSize,text: _this.qrUrl})
					.then(res => {
						//  Back to res And uni.canvasToTempFilePath Return consistent 
						console.log( res.tempFilePath);
						_this.qrCode =this.qrUrl;
						_this.onCanvas();
					});
			},
			//  drawing 
			async onCanvas() {

				const ctx = uni.createCanvasContext(_this.canvasID, _this);
				//  Set up  canvas  Background color 
				ctx.setFillStyle('#FFFFFF');
				ctx.fillRect(0, 0, _this.canvasWidth, _this.canvasHeight);
				ctx.setFillStyle('#000000');
				//  Background image 
				ctx.drawImage(_this.shareImage, 0, 0, 500, 1000);
				ctx.setFontSize(18);
				ctx.setTextAlign('center');
				// ctx.fillText(_this.shareTitle, _this.canvasWidth/2, 30);
				//  Left title 
				ctx.setTextAlign('left')
				ctx.setFontSize(30)
				_this.writeTextOnCanvas(ctx, 30, 21, _this.goodsTitle, 280, 720);
				//  QR code 
				ctx.drawImage(_this.qrCode, 290, 750, 120, 120);
				// ctx.draw();

				//  Delay rendering to canvas On 
				let pic = await _this.setTime(ctx)
				_this.$emit('success', pic);
			},
			/**
			 * @param {Object} ctx_2d	getContext("2d")  object 
			 * @param {int} lineheight	 Paragraph text line height 
			 * @param {int} bytelength	 Set the number of single byte text in one line 
			 * @param {string} text		 Write the paragraph text of the screen 
			 * @param {int} startleft	 Start drawing text  x  coordinates （ Relative to the canvas ）
			 * @param {int} starttop	 Start drawing text  y  coordinates （ Relative to the canvas ）
			 */
			writeTextOnCanvas(ctx_2d, lineheight, bytelength, text, startleft, starttop) {
				//  Get the real length of the string （ bytes ）
				function getTrueLength(str) {
					var len = str.length,
						truelen = 0;
					for (var x = 0; x < len; x++) {
						if (str.charCodeAt(x) > 128) {
							truelen += 2;
						} else {
							truelen += 1;
						}
					}
					return truelen;
				}
				//  Intercepts a string by byte length , return substr Intercept location 
				function cutString(str, leng) {
					var len = str.length,
						tlen = len,
						nlen = 0;
					for (var x = 0; x < len; x++) {
						if (str.charCodeAt(x) > 128) {
							if (nlen + 2 < leng) {
								nlen += 2;
							} else {
								tlen = x;
								break;
							}
						} else {
							if (nlen + 1 < leng) {
								nlen += 1;
							} else {
								tlen = x;
								break;
							}
						}
					}
					return tlen;
				}
				for (var i = 1; getTrueLength(text) > 0; i++) {
					var tl = cutString(text, bytelength);
					ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i - 1) * lineheight +
						starttop);
					text = text.substr(tl);
				}
			},
			//  Completely change to synchronization   Prevent the picture address from being empty 
			setTime(ctx) {
				return new Promise((resole, err) => {
					setTimeout(() => {
						ctx.draw(false, async () => {
							let pic = await _this.getNewPic();
							resole(pic)
						});
					}, 100)
				})
			},
			//  Get a new picture address 
			getNewPic() {
				return new Promise((resolve, errs) => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: _this.canvasID,
							quality: 1,
							complete: (res) => {
								//  stay H5 Under the platform ,tempFilePath  by  base64
								//  close showLoading
								console.log(res);
								uni.hideLoading();
								//   Store poster address    It's also a shared address 
								resolve(res.tempFilePath)
							}
						}, _this);
					}, 200)
				})
			},
		},
		mounted() {
			_this = this;
		}
	}
</script>