版权声明:如需转发,与我联系 https://blog.csdn.net/qq_41473887/article/details/80678276
在小程序中上传文件置媒体库中,可能考虑调用的流畅性,需要对视频镜像 压缩处理。
下面是我代码
index.html 页面只是一个简单的按钮选择
<
view
bindtap=
'aa'
>选择图片
</
view
>
<
canvas
canvas-id=
"photo_canvas"
style=
"width:{{canvasWidth}}px;height:{{canvasHeight}}px;position: absolute;left:-300px;top:-300px;"
></
canvas
>
<!-- <view>
未压缩图片
<image style="width:{{canvasWidth2}}px;height:{{canvasHeight2}}px;" src='{{aaa}}'></image>
</view>
<view>
压缩图片
<image style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;" src='{{bbb}}'></image>
</view> -->
<
view
bindtap=
'bb'
>选择视频
</
view
>
index.js
Page
({
/**
* 页面的初始数据
*/
data
:
{
},
/**
* 生命周期函数--监听页面加载
*/
onLoad
:
function
(options
)
{
},
aa
(){
var _this
=
this
;
wx
.chooseImage
({
count
:
1
,
sizeType
:
[
'compressed'
],
success
:
function
(photo
)
{
wx
.getImageInfo
({
src
: photo
.tempFilePaths
[
0
],
success
:
function
(res
)
{
var ctx
= wx
.createCanvasContext
(
'photo_canvas'
);
var ratio
=
10
;
var canvasWidth
= res
.width
var canvasHeight
= res
.height
;
_this
.setData
({
aaa
: photo
.tempFilePaths
[
0
],
canvasWidth2
: res
.width
,
canvasHeight2
: res
.height
})
// 保证宽高均在200以内
while
(canvasWidth
>
200
|| canvasHeight
>
200
)
{
//比例取整
canvasWidth
= Math
.trunc
(res
.width
/ ratio
)
canvasHeight
= Math
.trunc
(res
.height
/ ratio
)
ratio
++;
}
_this
.setData
({
canvasWidth
: canvasWidth
,
canvasHeight
: canvasHeight
})
//设置canvas尺寸
ctx
.drawImage
(photo
.tempFilePaths
[
0
],
0
,
0
, canvasWidth
, canvasHeight
) //将图片填充在canvas上
ctx
.draw
()
//下载canvas图片
setTimeout
(
function
()
{
wx
.canvasToTempFilePath
({
canvasId
:
'photo_canvas'
,
success
:
function
(res
)
{
console
.log
(res
.tempFilePath
)
_this
.setData
({
bbb
: res
.tempFilePath
})
},
fail
:
function
(error
)
{
console
.log
(error
)
}
})
},
100
)
},
fail
:
function
(error
)
{
console
.log
(error
)
}
})
},
error
:
function
(res
)
{
console
.log
(res
);
}
})
},
bb
(){
wx
.chooseVideo
({
compressed
:
true
,
success
(e
){
console
.log
(e
)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady
:
function
()
{
},
/**
* 生命周期函数--监听页面显示
*/
onShow
:
function
()
{
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide
:
function
()
{
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload
:
function
()
{
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh
:
function
()
{
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom
:
function
()
{
},
/**
* 用户点击右上角分享
*/
onShareAppMessage
:
function
()
{
}
})