作者:詹荣臣 | 来源:互联网 | 2022-12-20 11:48
//选择图片
chooseImage(){
let that =this
uni.chooseImage({
sizeType: ['original','compressed'], //可以指定是原图还是压缩图,默认二者都有
count: 9,//默认9
success: (rem) => {
console.log(rem)
that.tempFilePaths = rem.tempFilePaths;
//#ifdef MP-WEIXIN
//图片压缩并转base64
that.weixin_img(0,rem)
//#endif
//#ifdef APP-PLUS
//图片压缩
that.app_img(0,rem)
//#endif
}
})
},
//app压缩图片 用for循环 来处理图片压缩 的问题,原因是 plus.zip.compressImage 方法 是异步执行的,for循环很快, 同时手机可执行的压缩方法有限制:应该是3个吧。超出直接就不执行了。所以 原理就是 在图片压缩成功后 继续 回调 压缩函数。 以到达循环压缩图片的功能。
app_img(num,rem){
let that=this
let index = rem.tempFiles[num].path.lastIndexOf(".");//获取图片地址最后一个点的位置
let img_type = rem.tempFiles[num].path.substring(index+1,rem.tempFiles[num].path.length);//截取图片类型如png jpg
let img_yuanshi = rem.tempFiles[num].path.substring(0,index);//截取图片原始路径
let d2 = new Date().getTime(); //时间戳
//压缩图片
plus.zip.compressImage(
{
src:rem.tempFiles[num].path,//你要压缩的图片地址
dst:img_yuanshi+d2+'.'+img_type,//压缩之后的图片地址(注意压缩之后的路径最好和原生路径的位置一样,不然真机上报code-5)
quality:10//[10-100]
},
function(e) {
console.log("Compress success!",e.target);
//压缩之后路径转base64位的
//通过URL参数获取目录对象或文件对象
plus.io.resolveLocalFileSystemURL(e.target, function( entry ) {
// 可通过entry对象操作test.html文件
entry.file( function(file){//获取文件数据对象
var fileReader = new plus.io.FileReader();// 文件系统中的读取文件对象,用于获取文件的内容
//alert("getFile:" + JSON.stringify(file));
fileReader.readAsDataURL( file ); //以URL编码格式读取文件数据内容
fileReader.Onloadend= function(evt) {//读取文件成功完成的回调函数
console.log(evt.target.result.split(",")[1])//拿到'data:image/jpeg;base64,'后面的
rem.tempFiles[num].Base64_Path=evt.target.result.split(",")[1]
}
})
})
that.materialList = that.materialList.concat(rem.tempFiles[num]);
//利用递归循环来实现多张图片压缩
if(num==rem.tempFiles.length-1){
return
}else{
that.app_img(num+1,rem)
}
console.log('end',that.materialList)
},function(error) {
console.log("Compress error!");
console.log(JSON.stringify(error));
}
);
},
//微信压缩
weixin_img(num,rem){
let that=this
wx.getImageInfo({//获取这个图片 图片压缩
src: rem.tempFiles[num].path,//需要获取的图片 图片选择不用我说了吧
success: function (res) {
var ctx = wx.createCanvasContext('attendCanvasId');//使用一个canvas
var canvasWidth = res.width//原图宽度
var canvasHeight = res.height;//原图高度
var ratio = 2;
// 保证宽高均在200以内
while (canvasWidth > 200 || canvasHeight > 200){
//比例取整
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
//绘制新图
ctx.drawImage(rem.tempFiles[num].path, 0, 0, canvasWidth, canvasHeight)
ctx.draw(false, () => {
//获取图像数据, API 1.9.0
wx.canvasGetImageData({
canvasId: 'attendCanvasId',
x: 0,
y: 0,
width: canvasWidth,
height: canvasHeight,
success : (res) => {
let platform = wx.getSystemInfoSync().platform
if (platform == 'ios') {
// 兼容处理:ios获取的图片上下颠倒
res = that.reverseImgData(res)
}
// 3. png编码
let pngData = upng.encode([res.data.buffer],canvasWidth, canvasHeight)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// console.log('1111','data:image/jpeg;base64,'+base64)
rem.tempFiles[num].Base64_Path=base64
that.materialList = that.materialList.concat(rem.tempFiles[num]);
//利用递归循环来实现多张图片压缩
if(num==rem.tempFiles.length-1){
return
}else{
that.weixin_img(num+1,rem)
}
console.log('end',that.materialList)
}
})
})
},
})
},
// 兼容处理:ios获取的图片上下颠倒
reverseImgData(res) {
var w = res.width
var h = res.height
let con = 0
for (var i = 0; i 2; i++) {
for (var j = 0; j 4; j++) {
con = res.data[i * w * 4 + j]
res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
res.data[(h - i - 1) * w * 4 + j] = con
}
}
return res
}
}
微信小程序压缩图片需要用到
const upng = require('../../static/js/upng.js');和pake.min.js去下载两个文件放一起
地址https://github.com/zh8637688/wx-cardscanner/tree/master/cardscanner/upng-js