• 视觉特效，图片转成漫画功能

    使用最新人工智能技术，提供老照片修复、头像动漫化、头像3D游戏化、人物特效等20多种图片处理技术。

    视觉特效

    使用最新人工智能技术，提供老照片修复、头像动漫化、头像3D游戏化、人物特效等20多种图片处理技术。

    开源的是前端模板，开源的是前端模板，开源的是前端模板，可以自己对接后端。

    首页功能对接的百度云和火山引擎接口，需要自己去申请接口。

    更多功能使用的canvas处理。

    接下来从2个方面介绍一下：

     1、版本预览

    2、技术点有趣点分享

    1、版本预览

    1、微信小程序

    搜索  趣味头像制作

    或者扫码

    2、qq小程序

    版本审核中，稍后更新

     3、安卓app下载地址


    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

     

     效果图如下：

     2、技术点有趣点分享：

    1、图片滑动显示

    1. <template>
    2. 	<view class="imgComparison" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
    3. 		<view class="before-image" :style="'width:' + x + 'rpx'">
    4. 			<view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
    5. 				<image :src="beforeImageUrl" class="images" mode="aspectFill" data-type="before" @tap="previewImage">
    6. 				</image>
    7. 			</view>
    8. 			<view v-if="beforeText" class="before-text">
    9. 				{{beforeText}}
    10. 			</view>
    11. 		</view>
    12. 		<view class="after-image">
    13. 			<view class="wrapper" v-if="wrapper"></view>
    14. 			<view :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
    15. 				<video v-if="getSuffix(afterImageUrl) == 'mp4'" :src="afterImageUrl" :loop="true" class="images" data-type="after"></video>
    16. 				<image v-else :src="afterImageUrl" class="images" mode="aspectFill" data-type="after" @tap="previewImage">
    17. 				</image>
    18. 			</view>
    19. 			<view v-if="afterText" class="after-text">
    20. 				{{afterText}}
    21. 			</view>
    22. 		</view>
    23. 		<view class="slider-bar" :style="'left:' + x + 'rpx'" @touchmove="handleTouchMove"
    24. 			@touchstart="handleTouchStart" @touchend="handleTouchEnd">
    25. 			<view class="slider-button"></view>
    26. 		</view>
    27. 	</view>
    28. </template>

     

    1. handleTouchStart(event) {
    2. 				this.isPressDown = true;
    3. 				this.x = event.target.offsetLeft * 2;
    4. 				if (this.x <= 0) {
    5. 					this.x = this.width / 2;
    6. 				}
    7. 			},
    8. 			handleTouchMove(event) {
    9. 				if (!this.isPressDown) {
    10. 					return;
    11. 				}
    12. 				this.x = event.touches[0].clientX * 2;
    13. 				if (this.x >= this.width) {
    14. 					this.x = this.width;
    15. 				} else if (this.x <= 0) {
    16. 					this.x = 0;
    17. 				}
    18. 			},
    19. 			handleTouchEnd(event) {
    20. 				this.isPressDown = false;
    21. 				return false;
    22. 			},

    2、 小程序图片上传和app图片上传处理（图片为base64格式）

    小程序和app上传方式需要修改，案例如下：

    1. 	chooseImage(){
    2. 				let that = this;
    3. 				
    4. 				uni.chooseImage({
    5. 					count: 1, // 默认9
    6. 					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
    7. 					sourceType: ['album', 'camera'],
    8. 					success: function(res) {
    9. 						let tempImagePath = res.tempFilePaths[0];
    10. 						
    11. 						// 清空之前选择的图片
    12. 						that.initImg();
    13. 						
    14. 						// 上传并检测图片合法性
    15. 						// #ifndef H5
    16. 						uni.compressImage({
    17. 							src: tempImagePath,
    18. 							quality: 80,
    19. 							success: res1 => {
    20. 								// 如果路径最后一位是.，则不上传压缩路径。
    21. 								let uploadPath = res1.tempFilePath;
    22. 								if(uploadPath.substr(uploadPath.length - 1, 1) == '.'){
    23. 									uploadPath = tempImagePath;
    24. 								}
    25. 								
    26. 								that.uploadImg(uploadPath);
    27. 							}
    28. 						})
    29. 						// #endif
    30. 						// #ifdef H5
    31. 						that.uploadImg(tempImagePath);
    32. 						// #endif
    33. 					}
    34. 				});
    35. 			},
    36. 			
    37. 			uploadImg(path){
    38. 				let that = this;
    39. 				
    40. 				uni.getImageInfo({
    41. 					src: path,
    42. 					success: function(image) {
    43. 						that.height = image.height / (image.width / that.width);
    44. 						// 竖图且大于屏幕70%，将高度直接减半显示
    45. 						if(image.height > image.width && image.height > that.phone_height * 0.7){
    46. 							that.height = that.height * 0.5
    47. 						}
    48. 						that.turnBase64IdCard(path)
    49. 					}
    50. 				});
    51. 				
    52. 				that.beforeImageUrl = path;
    53. 				that.wrapper = true;
    54. 			},
    55. 			turnBase64IdCard(file) {
    56. 				let that = this;
    57. 				// #ifdef APP-PLUS
    58. 					plus.io.resolveLocalFileSystemURL(file, function(entry) {
    59. 						entry.file(function(file) {
    60. 							var fileReader = new plus.io.FileReader();
    61. 							fileReader.readAsDataURL(file);
    62. 							fileReader.onloadend = function(evt) {
    63. 								let img = evt.target.result;
    64. 								let newImg = img.split('base64,')[1];
    65. 									newImg.trim().replace(/[\r\n]/g, "");
    66. 								//处理图片上传
    67. 							}
    68. 						})
    69. 					})
    70. 				// #endif
    71. 		
    72. 				// #ifdef MP-WEIXIN || MP-QQ 
    73. 				uni.getFileSystemManager().readFile({
    74. 					filePath: file,
    75. 					encoding: 'base64',
    76. 					success: res => {
    77. 						//处理图片上传
    78. 						
    79. 					}
    80. 				})
    81. 				// #endif
    82. 			},

     3、小程序和app下载base64图片方式不同

    1. saveImageToPhotosAlbum(){
    2. 						// #ifdef APP-NVUE
    3. 			                let base64=this.saveImageUrl
    4. 							let timer = new Date().getTime();
    5. 							const bitmap = new plus.nativeObj.Bitmap();
    6. 								bitmap.loadBase64Data(base64, function() {
    7. 									const url = "_doc/" + timer + ".png"; // url为时间戳命名方式
    8. 									console.log('saveHeadImgFile', url)
    9. 									bitmap.save(url, {
    10. 										overwrite: true, // 是否覆盖
    11. 										// quality: 'quality'  // 图片清晰度
    12. 									}, (i) => {
    13. 										uni.saveImageToPhotosAlbum({
    14. 											filePath: url,
    15. 											success: function() {
    16. 												uni.showToast({
    17. 													title: '图片保存成功',
    18. 													icon: 'none'
    19. 												})
    20. 												bitmap.clear()
    21. 											}
    22. 										});
    23. 									}, (e) => {
    24. 										uni.showToast({
    25. 											title: '图片保存失败',
    26. 											icon: 'none'
    27. 										})
    28. 										bitmap.clear()
    29. 									});
    30. 								}, (e) => {
    31. 									uni.showToast({
    32. 									title: '图片保存失败',
    33. 										icon: 'none'
    34. 									})
    35. 									bitmap.clear()
    36. 							 });
    37. 						// #endif 
    38. 						// #ifdef MP-WEIXIN || MP-QQ 
    39. 			                let filePath=uni.env.USER_DATA_PATH + '/'+timer+'.png';
    40. 			                uni.getFileSystemManager().writeFile({
    41. 			                    filePath:filePath ,  //创建一个临时文件名
    42. 			                    data: base64,    //写入的文本或二进制数据
    43. 			                    encoding: 'base64',  //写入当前文件的字符编码
    44. 			                    success: res => {
    45. 			                        uni.saveImageToPhotosAlbum({
    46. 			                            filePath: filePath,
    47. 			                            success: function(res2) {
    48. 			                                uni.showToast({
    49. 			                                    title: '保存成功，请从相册选择再分享',
    50. 			                                    icon:"none",
    51. 			                                    duration:5000
    52. 			                                })
    53. 			                            },
    54. 			                            fail: function(err) {
    55. 			                                // console.log(err.errMsg);
    56. 			                            }
    57. 			                        })
    58. 			                    },
    59. 			                    fail: err => {
    60. 			                        //console.log(err)
    61. 			                    }
    62. 			                })
    63. 						// #endif 
    64. 			            },

    各种图片比对接口，自行在火山引擎注册申请 

    火山引擎-智能激发增长火山引擎，全球先进的企业技术服务，助力企业数字化转型，赋能组织智能化升级，驱动业务前行https://www.volcengine.com/

    最后前端代码部分，请参考：

    【视觉特效】使用最新人工智能技术，提供图片处理小程序 - DCloud 插件市场 

  • 相关阅读:
    面试官：字节流可以处理一切文件为什么还需要字符流呢？
    姓莫的女孩子叫什么名字好听
    tf.gather_nd
    深度学习之情感分析
    微软Power Platform平台低代码
    包含min函数栈
    【设计模式】第2节：七大设计原则
    LabVIEW应用开发——控件的使用（三）
    除静电离子风蛇的工作原理及应用
    Spring Security 集成 OAuth 2.0 认证（一）
  • 原文地址：https://blog.csdn.net/qq_39197547/article/details/125502429