当前位置：网站首页>Visual effects, picture to cartoon function

Visual effects, picture to cartoon function

2022-07-01 02:25:00 【Shadow night with the wind】

Using the latest AI technology , Provide old photo repair 、 Avatar animation 、 Head portrait 3D Gameplay 、 Character effects, etc 20 A variety of image processing technologies .

Visual effects

Using the latest AI technology , Provide old photo repair 、 Avatar animation 、 Head portrait 3D Gameplay 、 Character effects, etc 20 A variety of image processing technologies .

Open source is the front-end template , Open source is the front-end template , Open source is the front-end template , You can connect to the back end by yourself .

Baidu cloud and volcano engine interface for home page function docking , You need to apply for the interface yourself .

For more functions canvas Handle .

Next from 2 Introduce the following aspects ：

1、 Version preview

2、 Technical points and interesting points to share

1、 Version preview

1、 Wechat applet

Search for Interesting avatar production

Or scan the code

2、qq Applet

Version review in progress , Update later

3、 Android app Download address

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-4049d7a8-5f2b-425b-be29-289beccc1088/179a7524-0608-4fed-807d-14ab6bd2587a.apk https://vkceyugu.cdn.bspapp.com/VKCEYUGU-4049d7a8-5f2b-425b-be29-289beccc1088/179a7524-0608-4fed-807d-14ab6bd2587a.apk%C2%A0

The renderings are as follows ：

2、 Technical points and interesting points to share ：

1、 Slide the picture

<template>
	<view class="imgComparison" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
		<view class="before-image" :style="'width:' + x + 'rpx'">
			<view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
				<image :src="beforeImageUrl" class="images" mode="aspectFill" data-type="before" @tap="previewImage">
				</image>
			</view>
			<view v-if="beforeText" class="before-text">
				{
   {beforeText}}
			</view>
		</view>
		<view class="after-image">
			<view class="wrapper" v-if="wrapper"></view>
			<view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
				<video v-if="getSuffix(afterImageUrl) == 'mp4'" :src="afterImageUrl" :loop="true" class="images" data-type="after"></video>
				<image v-else :src="afterImageUrl" class="images" mode="aspectFill" data-type="after" @tap="previewImage">
				</image>
			</view>
			<view v-if="afterText" class="after-text">
				{
   {afterText}}
			</view>
		</view>
		<view class="slider-bar" :style="'left:' + x + 'rpx'" @touchmove="handleTouchMove"
			@touchstart="handleTouchStart" @touchend="handleTouchEnd">
			<view class="slider-button"></view>
		</view>
	</view>
</template>

handleTouchStart(event) {
				this.isPressDown = true;
				this.x = event.target.offsetLeft * 2;
				if (this.x <= 0) {
					this.x = this.width / 2;
				}
			},
			handleTouchMove(event) {
				if (!this.isPressDown) {
					return;
				}
				this.x = event.touches[0].clientX * 2;
				if (this.x >= this.width) {
					this.x = this.width;
				} else if (this.x <= 0) {
					this.x = 0;
				}
			},
			handleTouchEnd(event) {
				this.isPressDown = false;
				return false;
			},

2、 Small program image upload and app Image upload processing （ Picture is base64 Format ）

Applets and app The upload method needs to be modified , The case is as follows ：

	chooseImage(){
				let that = this;
				
				uni.chooseImage({
					count: 1, //  Default 9
					sizeType: ['compressed'], // You can specify whether it is original or compressed , By default, both of them have 
					sourceType: ['album', 'camera'],
					success: function(res) {
						let tempImagePath = res.tempFilePaths[0];
						
						//  Clear the previously selected picture 
						that.initImg();
						
						//  Upload and check the legitimacy of the image 
						// #ifndef H5
						uni.compressImage({
							src: tempImagePath,
							quality: 80,
							success: res1 => {
								//  If the last bit of the path is ., Do not upload the compressed path .
								let uploadPath = res1.tempFilePath;
								if(uploadPath.substr(uploadPath.length - 1, 1) == '.'){
									uploadPath = tempImagePath;
								}
								
								that.uploadImg(uploadPath);
							}
						})
						// #endif
						// #ifdef H5
						that.uploadImg(tempImagePath);
						// #endif
					}
				});
			},
			
			uploadImg(path){
				let that = this;
				
				uni.getImageInfo({
					src: path,
					success: function(image) {
						that.height = image.height / (image.width / that.width);
						//  Vertical and larger than the screen 70%, Halve the height directly to display 
						if(image.height > image.width && image.height > that.phone_height * 0.7){
							that.height = that.height * 0.5
						}
						that.turnBase64IdCard(path)
					}
				});
				
				that.beforeImageUrl = path;
				that.wrapper = true;
			},
			turnBase64IdCard(file) {
				let that = this;
				// #ifdef APP-PLUS
					plus.io.resolveLocalFileSystemURL(file, function(entry) {
						entry.file(function(file) {
							var fileReader = new plus.io.FileReader();
							fileReader.readAsDataURL(file);
							fileReader.onloadend = function(evt) {
								let img = evt.target.result;
								let newImg = img.split('base64,')[1];
									newImg.trim().replace(/[\r\n]/g, "");
								// Processing image upload 
							}
						})
					})
				// #endif
		
				// #ifdef MP-WEIXIN || MP-QQ 
				uni.getFileSystemManager().readFile({
					filePath: file,
					encoding: 'base64',
					success: res => {
						// Processing image upload 
						
					}
				})
				// #endif
			},

3、 Applets and app download base64 The picture is different

saveImageToPhotosAlbum(){
						// #ifdef APP-NVUE
			                let base64=this.saveImageUrl
							let timer = new Date().getTime();
							const bitmap = new plus.nativeObj.Bitmap();
								bitmap.loadBase64Data(base64, function() {
									const url = "_doc/" + timer + ".png"; // url Name the timestamp 
									console.log('saveHeadImgFile', url)
									bitmap.save(url, {
										overwrite: true, //  Is it covered? 
										// quality: 'quality'  //  Picture clarity 
									}, (i) => {
										uni.saveImageToPhotosAlbum({
											filePath: url,
											success: function() {
												uni.showToast({
													title: ' Picture saved successfully ',
													icon: 'none'
												})
												bitmap.clear()
											}
										});
									}, (e) => {
										uni.showToast({
											title: ' Picture save failed ',
											icon: 'none'
										})
										bitmap.clear()
									});
								}, (e) => {
									uni.showToast({
									title: ' Picture save failed ',
										icon: 'none'
									})
									bitmap.clear()
							 });
						// #endif 
						// #ifdef MP-WEIXIN || MP-QQ 
			                let filePath=uni.env.USER_DATA_PATH + '/'+timer+'.png';
			                uni.getFileSystemManager().writeFile({
			                    filePath:filePath ,  // Create a temporary file name 
			                    data: base64,    // Written text or binary data 
			                    encoding: 'base64',  // Write the character encoding of the current file 
			                    success: res => {
			                        uni.saveImageToPhotosAlbum({
			                            filePath: filePath,
			                            success: function(res2) {
			                                uni.showToast({
			                                    title: ' Saved successfully , Please choose to share again from the album ',
			                                    icon:"none",
			                                    duration:5000
			                                })
			                            },
			                            fail: function(err) {
			                                // console.log(err.errMsg);
			                            }
			                        })
			                    },
			                    fail: err => {
			                        //console.log(err)
			                    }
			                })
						// #endif 
			            },