uni-app图片上传使用canvas质量压缩转base64数据格式兼容H5版本

uni-app图片上传质量压缩转成base64数据格式方法详解:

效果如图:


使用关键点:

uni.chooseImage、uni.createCanvasContext、ctx.drawImage、ctx.draw、uni.canvasToTempFilePath

完整代码:

<template>
<view class="content">
<view @tap="_changImg" >
选择图片
</view>
<canvas id="_myCanvas" canvas-id="_myCanvas" style="height:100px;width:100px"/>
</view>
</template>

<script>
export default {
data() {
return {
}
},
onLoad() {


},
components: {
},
methods: {
_changImg:function(){
let that = this;
uni.chooseImage({
count: 6, //默认6
sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
success: function (res) {
const ctx = uni.createCanvasContext('_myCanvas', that);
ctx.drawImage(res.tempFilePaths[0], 0, 0, 100, 100)
ctx.draw(false, () => {
uni.canvasToTempFilePath({
width: 50,
height: 50,
destWidth: 100,
destHeight: 100,
quality:0.8,
canvasId: '_myCanvas',
success: function(res) {
// 在H5平台下,tempFilePath 为 base64
console.log(res.tempFilePath)
}
})
})

},
fail: function (e) {
}
});
},
},
}
</script>

<style>

</style>

图片压缩逻辑解析:通过chooseImage选择图片,先创建一个存放图片的canvas区域,通过图片绘制将图片写入canvas中,通过uni-app提供的api将图片压缩输出uni.canvasToTempFilePath;

uni.chooseImage对应参数:


uni.createCanvasContext参数使用:

uni.createCanvasContext(canvasId, this)
参数类型说明
canvasIdString画布表示,传入定义在 <canvas/> 的 canvas-id
componentInstanceObject自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/> ,如果省略,则不在任何自定义组件内查找

uni.canvasToTempFilePath参数使用:

官方使用文档点击前往

注:通过uni.canvasToTempFilePath生成的数据仅在H5版本上是base64数据,如果你需要在其余小程序或者APP上获取base64数据则还需要进行转换。其余支付宝小程序、微信小程序、APP版本的转base64后期会陆续更新到本博客。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!