前面我已經把騰訊雲的人像轉動漫化介面接到了我的小程式裡,但是和阿里雲的對比後,發現阿里雲的效果會更好一些,且支援更多特效,如下:
我比較喜歡這個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,到這裡,小程式對接阿里雲人像動漫化介面就完成了,實現的效果為可嘗試不同的效果進行轉換,如:
換個風格繼續生成:
小程式名:《一方雲知》。歡迎大家使用,人像動漫化介面是免費使用的。
這篇文章就到這裡啦!如果你對文章內容有疑問或想要深入討論,歡迎在評論區留言,我會盡力回答。同時,如果你覺得這篇文章對你有幫助,不妨點個贊並分享給其他同學,讓更多人受益。
想要了解更多相關知識,可以檢視我以往的文章,其中有許多精彩內容。記得關注我,獲取及時更新,我們可以一起學習、討論技術,共同進步。
感謝你的閱讀與支援,期待在未來的文章中與你再次相遇!