首页 > 编程语言 >微信小程序开发:接入阿里云人像动漫化api接口

微信小程序开发:接入阿里云人像动漫化api接口

时间:2024-03-04 19:59:26浏览次数:30  
标签:云人 动漫 oss 程序开发 接口 阿里 api path 上传

前面我已经把腾讯云的人像转动漫化接口接到了我的小程序里,但是和阿里云的对比后,发现阿里云的效果会更好一些,且支持更多特效,如下:

 

我比较喜欢这个3D特效风格,动画3D也可以,大家拭目以待。

话说上次接了腾讯云的人像转动漫接口,小程序提审后居然没过,说什么我的小程序设计AI合成:

 

然后我就说我用的是你们腾讯的云api,才给我通过审核:

 

太难了,个人你要是想做AI的东西,直接一刀切了,我之前还做过接入微软的azure openai,微信审核直接给我拒绝了,不管你怎么提交说明都没用。

我就把这个功能隐藏了,自己用算了。

回到正文,我们看看阿里云的人像动漫化接口文档:

 

很简单,就两个参数。

而且还和腾讯云一样,提供了完整的SDK示例:

 

但是这个v2版本的是用ts写的,且uniapp的云对象好像不支持import语法。

所以我这里使用的v1版本:

 

v1版本看起来简单很多,但是使用起来却有个问题,因为我之前用的腾讯云的对象存储,所以图片的链接自然而然是腾讯云的,不传不知道,一传报错了:

 

意思是只能使用阿里云的oss地址,但是吧,又有使用其他oss地址的使用方法:

https://help.aliyun.com/zh/viapi/developer-reference/node-js?spm=a2c4g.11186623.0.i3#212354503dfmw

 

相当于是换了一种请求方式了,这里得请求方式不是人像动漫化的请求方式,人像动漫化的请求方式又得去找,而且还不知道在哪里找,遂就使用阿里云的oss好了,开通后创建一个上海区域的bucket:

 

所以现在的流程是:先将图片上传到阿里云的oss,再拿到图片的地址后传到人像动漫化接口,但是这个url只有短暂的使用周期,还得有个进程去删除,这里我想的是上传后有个表存一下文件路径,一天后自动删除,这样不占用存储空间,因为这些图片上传后就没有了,说干就干:

看了一下阿里云的上传文件,好像还挺简单的:

 

只需要拿到本地文件路径即可,再传一个自定义的文件名就行。

所以现在的大概流程是:先上传文件到阿里云的对象存储,拿到图片地址后传给阿里云的人像动漫化接口,再有一个定时任务去删除这些上传的图片文件,大概保存1天左右。

所以目前第一步就是先上传文件到阿里云oss。

直接把阿里云oss上传文件的示例代码复制一下:

先安装一下这两个包:

1、npm install ali-oss

2、npm install path

 

因为我电脑就一个512G的SSD,所以没有分区,就一个C盘。

安装好了:

 

看着三个包,其实整个node_modules大小居然有17M:

 

把阿里云上传oss代码稍微改一改:

// 上传文件到oss

/**

* @param {Object} tem_path 完整本地文件名,如:
http://tmp/qr57Es0lWn3B3f29b015140ccefdbf4504bbe2e1228f.png

*/

async upload_file(tem_path) {

let Config = await module.exports.get_config()

const client = new OSS({

region: Config.region,

accessKeyId: Config.accessKeyId,

accessKeySecret: Config.accessKeySecret,

bucket: Config.bucket,

})

const result = await client.put(path.basename(tem_path), tem_path)

return path.basename(tem_path)

}

但是又有新的问题:

 

阿里云的oss好像不能适应微信小程序的这种本地文件的形式。

遂改变上传方法,采用了:
https://developers.weixin.qq.com/community/develop/article/doc/0004ea0a6289a80b113beb69551413

在根目录的common下创建如下目录和文件:

 

在upload.js中导出上传的function:

 

使用:

import {

aliyunUploadFile

} from '@/common/upload_file_aliyun/upload'

// 调用上传方法,local_path是uview框架的u-upload回调中的event.file.url

await aliyunUploadFile(local_path)

此时可以成功上传文件了:

 

阿里云oss文件列表:

 

然后将这个阿里云的oss地址传给人像动漫化接口即可:

resultUrl = await aliyun_api.faceCartoonPic(this.raw_images[0]['url'], "animation3d")

console.log('resultUrl', resultUrl)

但是又有新的问题:

 

这个问题我是没想到,是url的问题?

我将人像动漫化接口的示例url拿过来传过去看看有没有问题,对比了下原来是endpoint配错了:

 

改正之后就可以调用并生成了~:

 

 

好了,再把那几个风格的选项加到界面上即可:

 

可以左右拖动。

但是打包上传后,又有新问题:

 

本地开发环境好好的,体验版这又是个啥?

先把之前安装的无用npm包删掉:

 

只保留人像动漫化的sdk。

 

删了两个npm包后瞬间只有5M的占用了,之前17M:

 

回到这个线上错误:

 

错误暂时定位到这里:

 

这样访问云对象就会报错,直接设置就没事:

 

想着之前腾讯云报错是因为线上环境NodeJs版本问题,索性就将线上NodeJs版本该高一点,结果当前的报错就解决了,解决了。。:

 

好家伙,以后涉及云对象之类的报错先升级NodeJs版本先。

OK,到这里,小程序对接阿里云人像动漫化接口就完成了,实现的效果为可尝试不同的效果进行转换,如:

 

 

换个风格继续生成:

 

小程序名:《一方云知》。欢迎大家使用,人像动漫化接口是免费使用的。

这篇文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。

想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。

感谢你的阅读与支持,期待在未来的文章中与你再次相遇!

标签:云人,动漫,oss,程序开发,接口,阿里,api,path,上传
From: https://www.cnblogs.com/shuinanxun/p/18052499

相关文章

  • 七款顶级API测试工具
    在现代软件开发中,API接口已成为不可或缺的核心组件。鉴于API缺乏直观的图形用户界面(GUI),使得直接对接口进行测试变得困难,对于前后端开发者而言,选择一套高效且实用的工具来测试API接口,从而验证开发的程序是否满足预期,显得尤为重要。在处理大量API时,手动测试不仅效率低下,而且容易出错......
  • 气象信息API
    用WPF技术搭建简单的气象免费小控件,注册取得key 前端代码:<Grid><Grid.ColumnDefinitions><ColumnDefinitionWidth="611*"/><ColumnDefinitionWidth="189*"/></Grid.ColumnDefinitions><......
  • C# 调用Web Api post提交json格式
    转载:https://blog.csdn.net/q_17600689511/article/details/82735172?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-82735172-blog-86551903.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=di......
  • 百度地图API自定义地图
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content......
  • 淘宝电商api接口 获取商品详情 搜索商品
    iDataRiver平台https://www.idatariver.com/zh-cn/提供开箱即用的taobao淘宝电商数据采集API,供用户按需调用。接口使用详情请参考淘宝接口文档接口列表1.获取商品详情参数类型是否必填默认值示例值描述apikeystring是idr_***从控制台里复制apikeyitem......
  • Asp.Net Core Web Api 对于ControllerBase的一些个人习惯扩展
    ApiResponse类是我定义的返回基类,Code我定的是0成功不等于0失败,对于Data我习惯于写object类型,不习惯写泛型,我习惯于给ControllerBase写扩展来定义我的返回方法,在写一个类继承于ControllerBase让后控制器再去继承这个类,也是可以的对于GetUserCode和GetRoleCode是方便获取to......
  • 【XInput】手柄模拟鼠标运作之 .NET P/Invoke 和 UWP-API 方案
    上一篇中,老周简单肤浅地介绍了XInputAPI的使用,并模拟了鼠标移动,左、右键单击和滚轮。本篇,咱们用.NET代码来完成相同的效果。说起来也是倒霉,博文写了一半,电脑忽然断电了。不知道什么原因,可能是UPS电源出故障。重新开机进来一看,博文没有自动保存到草稿箱。我记得以前是有自......
  • 探索浏览器录屏Web API 接口的应用前景与限制
    一、浏览器录屏WebAPI接口的优点:简化录屏流程:浏览器录屏WebAPI接口可以直接在网页中调用,无需安装额外的插件或软件,简化了录屏的流程。实时录制与传输:WebAPI接口可以实时录制用户操作并将录屏数据传输到服务器,实现即时的用户行为监测和分析。跨平台兼容性:浏览器录屏W......
  • 使用developer API压缩
    key/***中转压缩url*/publicfinalstaticStringTINIFY_URL="https://api.tinify.com/shrink";/***tinifyapiKey*/publicfinalstaticStringAPI_KET="xxxxx"; controller@PostMapping("/u......
  • Lazada电商api接口 获取商品详情 数据采集
    iDataRiver平台https://www.idatariver.com/zh-cn/提供开箱即用的Lazada电商数据采集API,供用户按需调用。接口使用详情请参考Lazada接口文档接口列表获取用户详情参数类型是否必填默认值示例值描述apikeystring是idr_***从控制台里复制apikeyitem_idn......