uni-app小程序 画布转base64并且进行压缩
在做一个签名的功能时,遇到的问题,签名后的画布需要转成图片,转成图片后,图片还要转base64,并且base64必须要很小(不能超过8kb),具体代码如下uni.canvasToTempFilePath({fileType: 'jpg',canvasId: 'mycanvas',quality: 1,success: function(res) {console.log("第一个画布生成图片",r
·
在做一个签名的功能时,遇到的问题,签名后的画布需要转成图片,转成图片后,图片还要转base64,并且base64必须要很小(不能超过8kb),具体代码如下
uni.canvasToTempFilePath({
fileType: 'jpg',
canvasId: 'mycanvas',
quality: 1,
success: function(res) {
console.log("第一个画布生成图片",res,res.tempFilePath)
uni.getImageInfo({ //获取图片具体信息
src: res.tempFilePath,
success: function(imageInfo){
console.log("获取图片信息",imageInfo)
var canvasWidth = imageInfo.width //图片原始长宽
var canvasHeight = imageInfo.height
let info = uni.createSelectorQuery().select(".agreement-mycanvas2");
info.boundingClientRect(function(rects) { //获取第二个画布的宽高
console.log("位置信息",rects.width) // 获取元素宽度
var towidth = rects.width; //第二个画布的宽
var toheight = rects.height; //第二个画布的高
var ctx = uni.createCanvasContext('mycanvas2')
ctx.drawImage(imageInfo.path, 0, 0, canvasWidth, canvasHeight,0,0,towidth,toheight)//等比写入第二个画布内
ctx.draw(false, setTimeout(function(){ //给画布预留点画图片的时间
uni.canvasToTempFilePath({ //对第二个画布进行转图片处理
canvasId: 'mycanvas2',
fileType: 'jpg',
quality: 0.8,
success: function (canvas2) {
console.log("最终的图片",canvas2.tempFilePath)//最终图片路径
uni.getFileSystemManager().readFile({ //对图片进行转base64存储
filePath: canvas2.tempFilePath, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: ress => { //成功的回调
console.log("base64数据:",'data:image/png;base64,'+ress.data)
uni.showToast({
title: '完成',
icon:'success',
mask: true,
});
}
})
},
fail: function (res) {
console.log(res.errMsg)
}
})
},100))
}).exec()
}
})
}
})
流程说明:在第一个画布内进行签名并且生成为jpg图片,然后对图片的宽高进行获取,并且获取一下第二个画布的宽高(我第二个画布设置的宽高为第一个画布的20%,所以要获取一下具体宽高值),然后将图片写入到第二个画布内,对第二个画布进行生成jpg图片,然后将图片信息转base64存储
更多推荐
已为社区贡献4条内容
所有评论(0)