加载中...
PAGE

uni-app小程序 画布转base64并且进行压缩

Post on 2021-11-12 22 0

在做一个签名的功能时,遇到的问题,签名后的画布需要转成图片,转成图片后,图片还要转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存储

mysql 树目录查询语句优化,提高查询效率

mysql 树目录查询语句优化,提高查询效率

阅读更多
js 实现简易版深拷贝

js 实现简易版深拷贝

阅读更多
js 获取音乐的音频音谱

js 获取音乐的音频音谱

阅读更多

暂无评论

    发表评论
    返回顶部
    X