微信小程序 圖片 相機 二維碼 動畫相關(guān)API(實現(xiàn)選擇相冊、拍照、錄像、動畫)
選擇圖片
wx.chooseImage(Object object)
功能描述： 從本地相冊選擇圖片或使用相機拍照。
從基礎(chǔ)庫 2.21.0 開始，本接口停止維護(hù)，請使用 wx.chooseMedia 代替
以 Promise 風(fēng)格 調(diào)用：支持
小程序插件：支持，需要小程序基礎(chǔ)庫版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac 版：支持
官方文檔參數(shù)
Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| count | number | 9 | 否 | 最多可以選擇的圖片張數(shù) |
| sizeType | Array. | [‘original’, ‘compressed’] | 否 | 所選的圖片的尺寸 |
| sourceType | Array. | [‘a(chǎn)lbum’, ‘camera’] | 否 | 選擇圖片的來源 |
| success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
| fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
| complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行） |
object.sizeType 的合法值
合法值 說明 original 原圖 compressed 壓縮圖
object.sourceType 的合法值
合法值 說明 album 從相冊選圖 camera 使用相機
object.success 回調(diào)函數(shù)
參數(shù)
Object res
| 屬性 | 類型 | 說明 | 最低版本 | |
|---|---|---|---|---|
| tempFilePaths | Array. | 圖片的本地臨時文件路徑列表 (本地路徑) | ||
| tempFiles | Array. | 圖片的本地臨時文件列表 | 1.2.0 |
res.tempFiles 的結(jié)構(gòu)
結(jié)構(gòu)屬性 類型 說明 path string 本地臨時文件路徑 (本地路徑) size number 本地臨時文件大小，單位 B
代碼
// pages/demo/index.jsPage({
data: {},
onLoad: function(options) {
},
/**
* 選擇圖片
*/
chooseImage(){
wx.chooseImage({
count: 5,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
console.log(res.tempFilePaths);
}
})
}})頁面
<!-- pages/demo/index.wxml --><button bindtap="chooseImage" size='mini' type="primary">選擇照片</button>
效果
以上代碼做個測試，需要做真機調(diào)試如下圖
真機調(diào)試->手機掃描->在手機上點擊【選擇照片】
預(yù)覽圖片
wx.previewImage(Object object)
功能描述： 在新頁面中全屏預(yù)覽圖片。預(yù)覽的過程中用戶可以進(jìn)行保存圖片、發(fā)送給朋友等操作。
以 Promise 風(fēng)格 調(diào)用：支持
小程序插件：支持，需要小程序基礎(chǔ)庫版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac 版：支持
官方文檔參數(shù)
Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| urls | Array. | 是 | 需要預(yù)覽的圖片鏈接列表。2.2.3 起支持云文件ID。 | ||
| showmenu | boolean | true | 否 | 是否顯示長按菜單。 | 2.13.0 |
| current | string | urls 的第一張 | 否 | 當(dāng)前顯示圖片的鏈接 | |
| referrerPolicy | string | no-referrer | 否 | origin: 發(fā)送完整的referrer; no-referrer: 不發(fā)送。格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程序的 appid，{version} 為小程序的版本號，版本號為 0 表示為開發(fā)版、體驗版以及審核版本，版本號為 devtools 表示為開發(fā)者工具，其余為正式版本； | 2.13.0 |
| success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | ||
| fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | ||
| complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行 |
代碼
wx.previewImage({
current: '', // 當(dāng)前顯示圖片的http鏈接
urls: [] // 需要預(yù)覽的圖片http鏈接列表})完整代碼
// pages/demo/index.jsPage({
data: {},
onLoad: function(options) {
},
/**
* 選擇圖片
*/
chooseImage(){
wx.previewImage({
current: 'https://img-blog.yssmx.com/7d9ec09660304c248c2279d72ed9d243.png', // 當(dāng)前顯示圖片的http鏈接
urls: [
'https://img-blog.yssmx.com/65256cf88e2b413b9eccda34aad5ecbb.png',
'https://img-blog.yssmx.com/d4a81724a53e4f3b85ac9bc2b49bd622.png'
] // 需要預(yù)覽的圖片http鏈接列表
})
}
})效果
真機調(diào)試->手機掃描->在手機上點擊【選擇照片】如下圖是個預(yù)覽圖片的效果
相機API
官方文檔
CameraContext wx.createCameraContext()
基礎(chǔ)庫 1.6.0 開始支持，低版本需做兼容處理。
小程序插件：支持，需要小程序基礎(chǔ)庫版本不低于 1.9.6
微信 Windows 版：支持
微信 Mac 版：支持
相關(guān)文檔: camera 組件介紹
功能描述
創(chuàng)建 camera 上下文 CameraContext 對象。
返回值
CameraContext
index.wxml：
<view class="page-body">
<view class="page-body-wrapper">
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<view class="btn-area">
<button type="primary" bindtap="takePhoto">拍照</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="startRecord">開始錄像</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="stopRecord">結(jié)束錄像</button>
</view>
<view class="preview-tips">預(yù)覽</view>
<image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
<video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
</view></view>/* pages/demo/index.wxss */.preview-tips {
margin: 20rpx 0;
}
.video {
margin: 50px auto;
width: 100%;
height: 300px;
}// pages/demo/index.jsPage({
onLoad() {
this.ctx = wx.createCameraContext()
},
takePhoto() {
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: res.tempImagePath })
}
})
},
startRecord() {
this.ctx.startRecord({
success: (res) => {
console.log('startRecord')
}
})
},
stopRecord() {
this.ctx.stopRecord({
success: (res) => {
this.setData({
src: res.tempThumbPath,
videoSrc: res.tempVideoPath })
}
})
},
error(e) {
console.log(e.detail)
}})全局樣式
/**app.wxss**/.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;}page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;}.page-body {
padding: 20rpx 0;}.page-body-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;}.btn-area {
margin-top: 60rpx;
box-sizing: border-box;
width: 100%;
padding: 0 30rpx;}效果
效果（需要在真機上測試）如下圖
拍照
錄像
二維碼
官方文檔
wx.scanCode(Object object)
基礎(chǔ)庫 1.0.0 開始支持，低版本需做兼容處理。
以 Promise 風(fēng)格 調(diào)用：支持
小程序插件：支持，需要小程序基礎(chǔ)庫版本不低于 1.9.6
功能描述
調(diào)起客戶端掃碼界面進(jìn)行掃碼
參數(shù)
Object object
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| onlyFromCamera | boolean | false | 否 | 是否只能從相機掃碼，不允許從相冊選擇圖片 | 1.2.0 |
| scanType | Array. | [‘barCode’, ‘qrCode’] | 否 | 掃碼類型 | 1.7.0 |
| success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | ||
| fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | ||
| complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行） |
object.success 回調(diào)函數(shù)
參數(shù)
Object res
| 屬性 | 類型 | 說明 | |
|---|---|---|---|
| result | string | 所掃碼的內(nèi)容 | |
| scanType | string | 所掃碼的類型 | |
| charSet | string | 所掃碼的字符集 | |
| path | string | 當(dāng)所掃的碼為當(dāng)前小程序二維碼時，會返回此字段，內(nèi)容為二維碼攜帶的 path | |
| rawData | string | 原始數(shù)據(jù)，base64編碼 |
示例代碼
// 允許從相機和相冊掃碼wx.scanCode({
success (res) {
console.log(res)
}})// 只允許從相機掃碼wx.scanCode({
onlyFromCamera: true,
success (res) {
console.log(res)
}})代碼
<!--index.wxml--><view class="container"> <button type="primary" bindtap="scanCode">掃描二維碼</button></view>
//index.js//獲取應(yīng)用實例const app = getApp()Page({
scanCode() {
wx.scanCode({
onlyFromCamera: true,
success(res) {
console.log(res)
}
})
}})效果
效果（需要在真機上測試）如下圖
這里有個簡單的二維碼來用真機調(diào)試，（當(dāng)此二維碼無法查看時，可以找別的二維碼來進(jìn)行測試）
手機掃描二維碼得到如下結(jié)果，返回字符串“Hello World”
1.5 動畫
官網(wǎng)文檔
往下拉找到-【在開發(fā)者工具中預(yù)覽效果】按提示步驟操作可以直接查看效果
文章來源：http://www.zghlxwxcb.cn/news/detail-760579.html
此專欄此階段完成文章來源地址http://www.zghlxwxcb.cn/news/detail-760579.html
到了這里，關(guān)于微信小程序 圖片 相機 二維碼 動畫相關(guān)API(實現(xiàn)選擇相冊、拍照、錄像、動畫)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
